blocks|key|1470819|text|我的建议是使用表格，因为您希望它们都在同一行，但具有各自的高度。Html：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1470820|<div+class="row-fluid">
<table+style="width:+100%25">
++++<tr>
++++++++<td+class="sidebar">1</td>
++++++++<td+class="content-box">2</td>
++++++++<td+class="sidebar">3</td>
++++</tr>
</table>|code-block|syntax|javascript|1470821|​|1470822|Css：|1470823|.sidebar+{
++++width:225px;
++++background-color:blue;
}
.content-box+{
++++background-color:red;
}|1470824|这是小提琴编辑：http://jsfiddle.net/mDpEX/|offset|length|1470825|//Flipbed|1470826|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/mDpEX/^0|0|0|0|0|0|8|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|15|8|@]|9|@$O|16|P|17|1|18]]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>My suggestion is using a table since you want all of them to be on the same row but with their own heights.
Html:</p>

<pre><code>&lt;div class="row-fluid"&gt;
&lt;table style="width: 100%"&gt;
    &lt;tr&gt;
        &lt;td class="sidebar"&gt;1&lt;/td&gt;
        &lt;td class="content-box"&gt;2&lt;/td&gt;
        &lt;td class="sidebar"&gt;3&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p></p>

<p>Css:</p>

<pre><code>.sidebar {
    width:225px;
    background-color:blue;
}
.content-box {
    background-color:red;
}
</code></pre>

<p>Here is the fiddle edit:
<a href="http://jsfiddle.net/mDpEX/" rel="nofollow">http://jsfiddle.net/mDpEX/</a></p>

<p>//Flipbed</p>


blocks|key|328241|text|如果不想使用表格进行布局，可以使用css3显示表格、表格单元格属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|328242|​|328243|#container+{
++++display:+table;
++++width:+100%25;
}
#left,+#middle,+#right+{
++++display:+table-cell;
++++height:+100px;
}
#left,+#right+{
++++width:+150px;
++++background:+green;
}
#middle+{
++++background:+gray;
}|code-block|syntax|javascript|328244|<div+id="container">
++++<div+id="left"></div>
++++<div+id="middle"></div>
++++<div+id="right"></div>
</div>|328245|328246|jsfiddle|offset|length|328247|有关css+display+properties的更多信息|328248|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/69e2cbck/|1|https://css-tricks.com/almanac/properties/d/display/^0|0|0|0|0|0|0|8|0|0|2|M|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|16|8|@]|9|@$N|17|O|18|1|19]]|A|$]]|$1|P|3|Q|5|6|7|1A|8|@]|9|@$N|1B|O|1C|1|1D]]|A|$]]|$1|R|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]|Z|$5|U|V|W|A|$X|10]]]]

<p>If you don't want to use table for layout, you can make use of css3 <em>display table, table-cell</em> properties,</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    display: table;
    width: 100%;
}
#left, #middle, #right {
    display: table-cell;
    height: 100px;
}
#left, #right {
    width: 150px;
    background: green;
}
#middle {
    background: gray;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="left"&gt;&lt;/div&gt;
    &lt;div id="middle"&gt;&lt;/div&gt;
    &lt;div id="right"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/69e2cbck/" rel="nofollow">jsfiddle</a></p>

<p>More on <a href="https://css-tricks.com/almanac/properties/d/display/" rel="nofollow">css display properties</a> </p>


blocks|key|1289557|text|实际上，我没有正确理解你的问题。如果你想把你的对齐到你的第一个div之后的剩余空间，只需将内容框的宽度设置为50%25(或者你想要的大小)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1289558|entityMap^0|19|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Actually i didn't get your question correctly. If you are looking to align your div on to the remaining space after your first div ie after <strong>sidebar</strong> div simply put width of <strong>content-box</strong> as 50%(or the size you want).</p>


blocks|key|1289580|text|我假设你想要像this这样的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1289581|HTML：|1289582|<div+class="row-fluid">
++++<div+class="span12">
++++++++<div+class="sidebar">1</div>
++++++++<div+class="content-box">2</div>
++++++++<div+class="sidebar">3</div>
++++</div>
</div>|code-block|syntax|javascript|1289583|CSS：|1289584|.sidebar+{
++++float:left;
++++width:225px;
++++background-color:blue;
}
.content-box+{
++++clear:left;
++++background-color:red;
++++width:225px;
}|1289585|希望这能有所帮助。|1289586|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/U3Hr5/3/^0|7|4|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>I assume you want something like <a href="http://jsfiddle.net/U3Hr5/3/" rel="nofollow">this</a>. </p>

<p>The HTML:</p>

<pre><code>&lt;div class="row-fluid"&gt;
    &lt;div class="span12"&gt;
        &lt;div class="sidebar"&gt;1&lt;/div&gt;
        &lt;div class="content-box"&gt;2&lt;/div&gt;
        &lt;div class="sidebar"&gt;3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The CSS:</p>

<pre><code>.sidebar {
    float:left;
    width:225px;
    background-color:blue;
}
.content-box {
    clear:left;
    background-color:red;
    width:225px;
}
</code></pre>

<p>Hope this helps.</p>


blocks|key|328208|text|这取决于您希望布局在不使用JavaScript的情况下响应调整大小的程度，以及您尝试迎合的浏览器。如果你的布局本质上是静态的，并且你只想响应宽度的变化，那么你可以使用类似这样的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|328209|http://jsfiddle.net/U3Hr5/4/|offset|length|328210|HTML|328211|<div+class="row-fluid">
++++<div+class="span12">
++++++++<div+class="left+sidebar">1</div>
++++++++<div+class="content-box">2</div>
++++++++<div+class="right+sidebar">3</div>
++++</div>
</div>|code-block|syntax|javascript|328212|CSS|328213|.span12+{
++++position:+relative;
}
.sidebar+{
++++position:+absolute;
++++top:+0;
++++width:+225px;
++++background-color:blue;
}
.left{left:+0;}
.right{right:0}
.content-box+{
++++margin-left:+225px;
++++margin-right:+225px;
++++background-color:red;
}|328214|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

<p>It depends upon how much you want the layout to respond to resizing without using JavaScript and what browsers you're trying to cater for. If your layout is essentially static and you just want to respond to width changes then you can use something like this.</p>

<p><a href="http://jsfiddle.net/U3Hr5/4/" rel="nofollow">http://jsfiddle.net/U3Hr5/4/</a></p>

<p>HTML</p>

<pre><code>&lt;div class="row-fluid"&gt;
    &lt;div class="span12"&gt;
        &lt;div class="left sidebar"&gt;1&lt;/div&gt;
        &lt;div class="content-box"&gt;2&lt;/div&gt;
        &lt;div class="right sidebar"&gt;3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.span12 {
    position: relative;
}
.sidebar {
    position: absolute;
    top: 0;
    width: 225px;
    background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
    margin-left: 225px;
    margin-right: 225px;
    background-color:red;
}
</code></pre>


blocks|key|1470863|text|您可以尝试像这样的http://jsfiddle.net/kKGVr/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1470864|基本上，如果你不将内容包装在一个包含div中，它将扩展以填充可用的空间-你可以通过删除名为#left或#right的div来测试这一点。这还将允许您添加页脚，因为没有使用绝对定位。|1470865|然而，如果中心柱变得比侧柱更长，它就会倒下。解决方案？不确定，也许可以使用javascript来调整侧栏的高度，使它们始终至少与中栏一样长。|1470866|HTML：|1470867|<div+id="wrapper">
++++<div+id="right">...</div>
++++<div+id="left">...</div>
++++content+here
</div>|code-block|syntax|javascript|1470868|和CSS：|1470869|#left{width:+200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}|1470870|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/kKGVr/^0|9|Q|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|19|8|@]|9|@]|C|$M|N]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>You can try something like this <a href="http://jsfiddle.net/kKGVr/" rel="nofollow">http://jsfiddle.net/kKGVr/</a></p>

<p>Basically, if you don't wrap the content in a containing div it will expand to fill the available space - you can test this by removing the divs called #left or #right. This will also allow you to add a footer because no absolute positioning is used.</p>

<p>It will fall down, however, if the central column becomes longer than the side columns... solution? Not sure, perhaps use javascript to adjust the height of the side columns so they are always at least as long as the central column.</p>

<p>HTML:</p>

<pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="right"&gt;...&lt;/div&gt;
    &lt;div id="left"&gt;...&lt;/div&gt;
    content here
&lt;/div&gt;
</code></pre>

<p>and CSS:</p>

<pre><code>#left{width: 200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}
</code></pre>


<p>How would i make my middle div take the remaining space left in width, but still staying in its place beside the 2 other divs?
Also if i remove either of the 2 divs on the sides, the main div should just take what space there is left?</p>

<p>Code:</p>

<pre><code>&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
    &lt;div class="sidebar"&gt;1&lt;/div&gt;
    &lt;div class="content-box"&gt;2&lt;/div&gt;
    &lt;div class="sidebar"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/U3Hr5/2/" rel="nofollow">http://jsfiddle.net/U3Hr5/2/</a></p>


Middle div 100% width

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我该如何让中间的div保留剩下的宽度空间，但仍然留在其他两个div旁边的位置？另外，如果我去掉两边的两个div中的任何一个，主div应该只占用剩下的空间？代码：<div class="row-fluid"><div class="span12">    <div class="sidebar">1</div>    <div class="content-box">2</div>    <div 

问中间div 100%宽度
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问中间div 100%宽度EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问中间div 100%宽度
EN