[英]How to align three images side by side using CSS
I want to align these three images side by side and afer the div with id menu. 我想将这三个图像并排对齐,然后使用id菜单进行div处理。
HTML 的HTML
<div id="menu">...</div>
<div class="l-grid">
<ul>
<li class="l-col l-size1of4">
<div id="location">
<img alt="Tell us your locaiton" src="images\location.jpeg" />
</div>
</li>
<li class="l-col l-size1of4">
<div id="delivery">
<img alt="Choose menu to be delivered" src="images\dial\location.jpeg" />
</div>
</li>
<li class="l-col l-size1of4">
<div id="payment">
<img alt="Payment mode" src="images\dial\payment.jpeg" />
</div>
</li>
</ul>
</div>
CSS 的CSS
.l-col {
float: left;
}
.l-size1of4 {
width: 166px;
}
adjacent pictures have to be in the page and after the div id main. 相邻图片必须在页面中且位于div id main之后。
Set the ul li.l-col
to display:inline-block
: 将ul li.l-col
为display:inline-block
:
.l-col{
display: inline-block;
}
JS Fiddle: http://jsfiddle.net/mR64t/ JS小提琴: http : //jsfiddle.net/mR64t/
Try using width for all .l-col class, 尝试对所有.l-col类使用width,
li.l-col {
display: inline;
}
or 要么
.l-col {
float: left;
width: 166px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.