Updated Fiddle

Question

我设法通过将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>

and fiddle.

我也想知道代码的其余部分是否是最佳实践，例如padding-left:135px - 是否更好地使用图像中的相对填充，而不是父div？如果是这样，最简单的改变方法是什么？

Answer 1

你在style属性之外有float:left，尝试在语音标记内移动它并将float: left应用于两个父div。

Answer 2

Updated Fiddle

您只需将代码更改为以下内容，每个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分开，以便明确区分内容和演示文稿，并捕获所提供的明显优势。

Answer 3

您在样式标记之外有一个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;
}

如何并排排列这些DIV（小提琴内部）？

3 个答案:

Updated Fiddle