您如何将div浮动到左侧？
[英]How do you float divs to the left?
问题描述
我试图成为一个更好的html编码器，所以我决定摆脱表布局。 而使用div布局代替，但是在使用div定位内容时遇到了问题。
在我的页面上，我尝试向其中添加三个图像和文本，但是它们不会使用float对齐，而是级联。
这是我的标记：
<style>
.left
{
float: left;
}
</style>
</head>
<body>
<div class="left">
<img src="Images/image.JPG" alt="" class="left" />
</div>
<div>
some text
</div>
<div class="left">
<img src="Images/image.JPG" alt="" class="left" />
</div>
<div>
some text
</div>
<div class="left">
<img src="Images/image.JPG" alt="" class="left" />
</div>
<div>
some text
</div>
</body>
我希望你们中的一个能指出问题，（帮助！我不想回到讨厌的桌子！:)）
这是一张照片：
编辑：我想垂直对齐
保罗·鲁布（Paul Roub）的答案是最接近的，但只需将它们隔开。
6 个解决方案
解决方案1
3 已采纳 2013-09-24 18:01:21
您根本不需要divs 。 试试这个HTML ：
<img src="Images/image.JPG" alt="" class="left" />
some text
<img src="Images/image.JPG" alt="" class="left" />
some text
<img src="Images/image.JPG" alt="" class="left" />
some text
这个CSS使您的文字与图片顶部对齐：
.left {
vertical-align: top;
}
编辑 ：
如果您希望在图片之间留出一些空间，那么CSS应该如下所示：
.left {
vertical-align: top;
margin-bottom: 10px; /* that gives you 10px of space at the bottom of an image*/
}
这是完整解决方案的jsfiddle 。
解决方案2
1 2013-09-24 17:59:56
另一种方法：将文本和图像div都向左浮动，并清除图像上的浮动：
.left {
float: left;
clear: left;
}
.left + div {
float: left;
}
解决方案3
1 2013-09-24 18:04:23
不知道这是否是您想要的，但这是一个小提琴：
HTML：
<div class="left">
<p><img src="Images/image.JPG" alt="" width="100px" height="100px" class="left" />someusce consequat ipsum nunc, nec condimentum dui cursus id. Ut consequat scelerisque urna, non porttitor tortor blandit vitae. Fusce scelerisque sem congue risus condimentum.
</p>
</div>
<div class="left">
<p><img src="Images/image.JPG" alt="" width="100px" height="100px" class="left" />some usce consequat ipsum nunc, nec condimentum dui cursus id. Ut consequat scelerisque urna, non porttitor tortor blandit vitae. Fusce scelerisque sem congue risus condimentum.
</p>
</div>
<div class="left">
<p><img src="Images/image.JPG" alt="" width="100px" height="100px" class="left" />someusce consequat ipsum nunc, nec condimentum dui cursus id. Ut consequat scelerisque urna, non porttitor tortor blandit vitae. Fusce scelerisque sem congue risus condimentum.
</p>
</div>
CSS：
.left
{
float: left;
width:33%;
}
.left img{
padding:5px;
}
如果希望它们堆叠在一起，请在left类中添加clear:both 。
这是另一个小提琴：
解决方案4
0 2013-09-24 17:53:58
您的文字必须在浮动div内
<div class="left">
<img src="Images/image.JPG" alt="" class="left" />
text
</div>
<div class="left">
<img src="Images/image.JPG" alt="" class="left" />
text
</div>
<div class="left">
<img src="Images/image.JPG" alt="" class="left" />
text
</div>
解决方案5
0 2013-09-24 18:11:57
最好的方法是使float：left然后clear：both。
<style>
.inline { float:left; }
.clear { clear:both; }
</style>
</head>
<body>
<div class="inline">
<img src="http://umbra.nascom.nasa.gov/images/latest_aia_171_icon.gif">
<p><center>Text 1</center></p>
</div>
<div class="inline">
<img src="http://umbra.nascom.nasa.gov/images/latest_aia_171_icon.gif">
<p><center>Text 2</center></p>
</div>
<div class="inline">
<img src="http://umbra.nascom.nasa.gov/images/latest_aia_171_icon.gif">
<p><center>Text 3</center></p>
</div>
<br class="clear">
</body>
您可以在此处查看示例。 我希望它能起作用。
解决方案6
0 2013-09-24 19:02:43
want想要这样的东西吗？
CSS
.img {
height: 100px;
width: 200px;
overflow: hidden;
border: 2px solid black;
float: left;
}
HTML
<div class="img"><img src="http://i.imgur.com/fqct5Us.gif"></div>
<p>Lorem ipsum dolor.</p>
<div class="img"><img src="http://i.imgur.com/fqct5Us.gif"></div>
<p>Lorem ipsum dolor.</p>
<div class="img"><img src="http://i.imgur.com/fqct5Us.gif"></div>
<p>Lorem ipsum dolor.</p>
它非常简单，只是不要浮动文本容器。
我的div不会向左浮动
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.