我正在尝试使用div
和CSS布局屏幕。这是一个简单的布局,但我似乎无法将div
排成一行。我想要一个包装div
,其中包含两个div
:一个与左边对齐,一个与右边对齐。然而,它们最终相互叠加。
我知道这个问题很简单。我在这里缺少什么?
如果我将右div
的宽度缩小为60%
,它会向右排列,但我不应该使用父100%
宽度的div
}?
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
答案 0 :(得分:1)
Float离开你的孩子元素:
<强> jsBin demo 强>
#product_wrapper > *{float:left;}
请注意,inline-block
会导致内部元素实际上像inline
元素一样运作
白色空间计数在哪里!
<小时/> SO 另一种方式是修改HTML,删除 NewLine 分隔符:
<强> jsBin demo 强>
<div id="images_wrapper">
Foo content
</div><div id="content_wrapper">
^^-------------------------------------- no space here
Bar content
</div>
第三种方式(最差一种方法)是为父级设置 font-size为0 (从逻辑上删除孩子的空白差距,因为现在是' 0' ); &GT;&GT;然后将子元素的字体大小重置为px
(原因em
将无效,因为父级已0
}。
但是,如果您使用em
和大小继承,那么这是松散跟踪动态和响应式字体大小的好方法。
答案 1 :(得分:0)
问题是html中的空格,它占据了元素之间的一些空间。
修复它的一种方法是
#product_wrapper {
font-size: 0; /* Hide whitespace in the html */
}
#images_wrapper, #content_wrapper {
font-size: 16px; /* Reset to whatever vaue */
}
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
font-size: 0;
}
#images_wrapper, #content_wrapper {
font-size: 16px;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
&#13;
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
&#13;
答案 2 :(得分:0)
使用float:left而不是display:inline-block
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
float:left;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
float:left;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
&#13;
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
&#13;