blocks|key|3007193|text|只需浮动第一个div，并设置第二个div的左边距以适应第一个div的宽度。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3007194|div.one+{
++width:+60px;
++float:+left;
}

div.two+{
++margin-left:+60px;
}|code-block|syntax|javascript|3007195|请记住，div上的width+CSS属性仅适用于内容，因此需要将margin-left设置为第一个div的width、border、margin和padding属性的总和。|offset|length|style|CODE|3007196|Here是您的jsfiddle的更新版本。如果你对此有任何疑问，请告诉我。|3007197|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/2yBZa/15/^0|0|0|9|5|W|B|1H|5|1N|6|1U|6|21|7|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]|$I|13|J|14|K|L]|$I|15|J|16|K|L]|$I|17|J|18|K|L]|$I|19|J|1A|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@$I|1C|J|1D|1|1E]]|A|$]]|$1|O|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Just float the first div, and set the margin-left of the second div to accommodate the width of the first div. Something like this:

<pre><code>div.one {
 width: 60px;
 float: left;
}

div.two {
 margin-left: 60px;
}
</code></pre>

Keep in mind that the <code>width</code> CSS property on the div only applies to the content, so you need to set the <code>margin-left</code> to be the sum of the <code>width</code>, <code>border</code>, <code>margin</code>, and <code>padding</code> properties of the first div.

<a href="http://jsfiddle.net/2yBZa/15/" rel="noreferrer">Here</a> is the updated version of your jsfiddle. Let me know if you have any questions about it.

blocks|key|290064|text|下面是它的实现方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|290065|.image+{
background:green;
color:green;
height:60px;
position:absolute;
width:60px;
}

.content+{
background:blue;
color:white;
margin-left:60px;
+++}|code-block|syntax|javascript|290066|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is how it will be done : 

<pre><code>.image {
background:green;
color:green;
height:60px;
position:absolute;
width:60px;
}

.content {
background:blue;
color:white;
margin-left:60px;
 }
</code></pre>

blocks|key|3221226|text|这就是它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3221227|CSS：|3221228|#container+{+background:+silver;+width:+100%25+}


.image
{
++++background:+green;+color:+green;
++++width:+60px;+height:+60px;
++++float:+left;

}
.content
{
++++background:+blue;+color:+white;
+++margin-left:+60px;


}|code-block|syntax|javascript|3221229|在jsFiddle上(目前正在上演)|offset|length|3221230|希望这能有所帮助！|3221231|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/hart1994/2yBZa/24/^0|0|0|0|1|8|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Here it is:

CSS:

<pre><code>#container { background: silver; width: 100% }


.image
{
 background: green; color: green;
 width: 60px; height: 60px;
 float: left;

}
.content
{
 background: blue; color: white;
 margin-left: 60px;


}
</code></pre>

And on <a href="http://jsfiddle.net/hart1994/2yBZa/24/" rel="nofollow">jsFiddle</a> (It's playing up at the moment)

Hope this helps!

blocks|key|3007221|text|另一种选择是使用flexible+box+model|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3007222|最近的firefox、chrome和safari都支持这种工作方案。|3007223|可以使用flexie.js.将其移植到不受支持的浏览器|3007224|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-flexbox/|1|https://github.com/doctyper/flexie^0|8|I|0|0|0|4|A|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

another option is to use the <a href="http://www.w3.org/TR/css3-flexbox/" rel="nofollow">flexible box model</a>

this working proposal is supported in recent firefox, chrome, and safari.

it can be ported to unsupported browsers using <a href="https://github.com/doctyper/flexie" rel="nofollow">flexie.js.</a>

blocks|key|3221277|text|有一个新的方法来安排元素在这里检查这个页面Flexbox+Froggy，这是一个游戏，你可以通过编写CSS3代码来帮助青蛙和朋友们！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3221278|使用justify-content属性将这只青蛙引导到右侧的lilypad，该属性将项目水平对齐并接受下列值：|3221279|3221280|flex-start：项目与container.|unordered-list-item|style|BOLD|3221281|flex-end：项目的左侧对齐container.|3221282|center：项目的右侧与container.|3221283|space-between：项目的中心对齐以相等的间距显示them.|3221284|space-around：项目之间以相等的间距显示。|3221285|3221286|entityMap|0|LINK|mutability|MUTABLE|url|http://flexboxfroggy.com/^0|L|E|0|0|0|0|0|A|0|0|8|0|0|6|0|0|D|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|17|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|18|8|@$A|19|B|1A|J|K]]|9|@]|C|$]]|$1|L|3|M|5|I|7|1B|8|@$A|1C|B|1D|J|K]]|9|@]|C|$]]|$1|N|3|O|5|I|7|1E|8|@$A|1F|B|1G|J|K]]|9|@]|C|$]]|$1|P|3|Q|5|I|7|1H|8|@$A|1I|B|1J|J|K]]|9|@]|C|$]]|$1|R|3|S|5|I|7|1K|8|@$A|1L|B|1M|J|K]]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

there is new way to arrange elements whit CSS3
Check here this page <a href="http://flexboxfroggy.com/" rel="nofollow">Flexbox Froggy</a>, a game where you help Froggy and friends by writing CSS code! 

Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:

<ul>
<li>flex-start: Items align to the left side of the container.</li>
<li>flex-end: Items align to the right side of the container.</li>
<li>center: Items align at the center of the container.</li>
<li>space-between: Items display with equal spacing between them.</li>
<li>space-around: Items display with equal spacing around them.</li>
</ul>

I want to achieve this:

<pre><code>width=60px width = remaining space
|------| |-----------------------------------|
| div1 | | Loren ipsun... |
|------| | |
 | div2 |
 |-----------------------------------|
</code></pre>

<blockquote>
 <a href="http://jsfiddle.net/2yBZa/">Sample html on jsFiddle.</a>
</blockquote>

Is it possible to place two divs side-by-side leaving the second div with all remaining space?

How to position two divs side by side where the second width is 100%?

我想要实现这一点：width=60px         width = remaining space|------|    |-----------------------------------|| div1 |    | Loren ipsun...                    ||------|   ...

问如何在第二个宽度为100%的地方并排放置两个div？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在第二个宽度为100%的地方并排放置两个div？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在第二个宽度为100%的地方并排放置两个div？
EN