我设法通过将float:left
应用于图像DIV,将包含图像的DIV和包含文本的DIV并排对齐。
但是当我在父DIV中包含这两个DIV并复制父级并尝试通过将float:left
应用于第一个父级来并排排列父母时,它不起作用。
这是我的代码:
<div style="width:350px;min-height: 200px; float:left;">
<div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;">
<div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
我也想知道代码的其余部分是否是最佳实践,例如padding-left:135px
- 是否更好地使用图像中的相对填充,而不是父div?如果是这样,最简单的改变方法是什么?
答案 0 :(得分:3)
你在style属性之外有float:left
,尝试在语音标记内移动它并将float: left
应用于两个父div。
答案 1 :(得分:1)
您只需将代码更改为以下内容,每个div
为display:inline-block;
,只要您的浏览器窗口大于两个div
宽度的总和,它们就会显示内联,不需要浮动:
<div style="width:350px;min-height: 200px;display:inline-block;">
<div style="float:left;">
<img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;">
</div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;"/>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;display:inline-block;">
<div style="float:left;">
<img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"/>
</div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
这就是说我强烈建议您将CSS与HTML分开,以便明确区分内容和演示文稿,并捕获所提供的明显优势。
答案 2 :(得分:1)
您在样式标记之外有一个float: left
属性。此外,您应该使用CSS类,而不是将所有CSS样式内联。它使您的代码更整洁,并防止大量重复样式。 Here是一个更新的小提琴。
HTML
<div class="parent">
<div class="image-wrap">
<img class="image" src="image.jpg" width=120px height=120px />
</div>
<div class="title">
Title
</div>
<div class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
</div>
<div class="parent">
<div class="image-wrap">
<img class="image" src="image.jpg" width=120px height=120px />
</div>
<div class="title">
Title
</div>
<div class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
</div>
CSS
.parent {
width:350px;
min-height: 200px;
float:left;
}
.title {
font-size:15pt;
color:red;
letter-spacing:-.04em;
padding-top:2px;
padding-left:135px;
}
.text {
font-size:11pt;
color:black;
letter-spacing:-.02em;
margin-top:4px;
padding-left:135px;
}
.image-wrap {
float: left;
}
.image {
border: 1px solid black;
padding:1px;
}