[英]aligning images and text side by side
我有一个包含三个服务项目的列表,其中包含一个图像(旨在向左浮动)和一小段文本(旨在向右浮动)。 我已经有了我认为合适的代码,但它不能正常工作,我不知道问题可能是什么。
<ul id="work">
<li><img src="http://placehold.it/350x150" /><p>SERVICE 1<br/><p>Service 1 description.</p></li>
<li><img src="http://placehold.it/350x150" /><p>SERVICE 2<br/><p>Service 2 description.</p></li>
<li><img src="http://placehold.it/350x150" /><p>SERVICE 3<br/><p>Service 3 description.</p></li>
#work li {
list-style-type: none !important;
}
#work li img {
float: left;
}
#work li p {
float: right;
}
问题是您正在嵌套<p>
元素:
<p>something<br><p>something</p>
用结束的</p>
换出<br>
并且一切都排成一行:
https://jsfiddle.net/jalbertbowdenii/5axLw1ww/
更改您的float: left
和float: right
以display: inline-block;
问题是浮动元素不占用其父元素的宽度和高度。 使用inline-block
,父元素将扩展以适应其子元素,并将其他元素向下推以腾出空间。
我试过了,效果很好。
<p>
标签和一个结束的</p>
标签。 请解决这个问题。clear:both
到li
。**
#work li { list-style-type: none !important; clear:both; } #work li img { float: left; } #work li p { float: right; }
<ul id="work"> <li><img src="http://placehold.it/350x150" /><p>SERVICE 1<br/>Service 1 description.</p></li> <li><img src="http://placehold.it/350x150" /><p>Service 2<br/>Service 2 description.</p></li> <li><img src="http://placehold.it/350x150" /><p>SERVICE 3<br/>Service 3 description.</p></li> </ul>
我认为您应该将文本包装在 div 上,以便您可以更轻松地操作它。 我将两个块都向左浮动,它们对齐得很好。 此外,如果您清除浮动<li>
标签将恢复它的高度
你可以尝试这样的事情。 这是小提琴
HTML
<ul id="work">
<li>
<img src="http://placehold.it/350x150" />
<div class="caption">
<p>SERVICE 1</p>
<p>Service 1 description.</p>
</div>
<div class="clear">
</div>
</li>
<li>
<img src="http://placehold.it/350x150" />
<div class="caption">
<p>SERVICE 1</p>
<p>Service 1 description.</p>
</div>
<div class="clear">
</div>
</li>
<li>
<img src="http://placehold.it/350x150" />
<div class="caption">
<p>SERVICE 1</p>
<p>Service 1 description.</p>
</div>
<div class="clear">
</div>
</li>
</ul>
和 CSS
#work li {
list-style-type: none !important;
margin-bottom: 10px;
}
#work li img {
float: left;
}
.caption {
float: left;
padding-left: 5px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.