<div>
<div style="display:inline-block">此处显示新 Div1标签的内容</div>
<div style="display:inline-block">此处显示新 Div2标签的内容</div>
<div style="display:inline-block">此处显示新 Div3标签的内容</div>
</div>
效果如图:
http://www.w3cplus.com/css/inline-blocks.html
div#left,div#right{
border-style:solid;
border-width:3px;
border-color:#F00;
}
#left{
width:35%;
display:inline-block;
height:300px;
}
#right{
width:35%;
display:inline-block;
height:300px;
}
<div id="left">
<p>123</p>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<hr />
<hr />
<hr />
<hr />
</div>
<div id="right">
<p>123</p>
<div style="display:inline-block">此处显示新 Div1标签的内容</div>
<div style="display:inline-block">此处显示新 Div2标签的内容</div>
<div style="display:inline-block">此处显示新 Div3标签的内容</div>
</div>
效果如图:
此处显示新 Div1标签的内容
此处显示新 Div2标签的内容
此处显示新 Div3标签的内容
在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,对inline元素设置width,height属性无效。
我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
http://www.w3cplus.com/css/inline-blocks.html
inline-block是什么?
Inline-block是元素display属性的一个值。这个名字的由来是因为,display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。
- 块级元素(block elements),来源于CSS盒子模型。块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列。 行内元素,排列方式是水平排列。
- 行内元素(inline elements)排列方式是水平排列。
- 行内块元素(inline-block elements)在内部他的表现类似block元素,比如他拥有block元素的width height,padding,border与margin,而外部的排列方式有类似行内元素,即水平排列,而不是像块级元素一样从上到下排列
div#left,div#right{
border-style:solid;
border-width:3px;
border-color:#F00;
}
#left{
width:35%;
display:inline-block;
height:300px;
}
#right{
width:35%;
display:inline-block;
height:300px;
}
<div id="left">
<p>123</p>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<hr />
<hr />
<hr />
<hr />
</div>
<div id="right">
<p>123</p>
</div>
这种情况用float排版 可以对齐div
#left{
width:35%;
float:left;
height:300px;
}
#right{
width:35%;
float:left;
height:300px;
}