Css 如何将这些div并排对齐（在内部拉小提琴）？_Css_Html_Alignment

Css 如何将这些div并排对齐（在内部拉小提琴）？

css html

Css 如何将这些div并排对齐（在内部拉小提琴）？,css,html,alignment,Css,Html,Alignment,通过对图像DIV应用float:left，我成功地将包含图像的DIV与包含文本的DIV并排对齐但是，当我将这两个DIV包含在父DIV中，并复制父DIV，然后尝试通过将float:left应用于第一个父DIV来并排对齐父DIV时，它就不起作用了这是我的密码： <div style="width:350px;min-height: 200px; float:left;"> <div style="float:left;"><img src="image.jpg"

通过对图像DIV应用

float:left

，我成功地将包含图像的DIV与包含文本的DIV并排对齐

但是，当我将这两个DIV包含在父DIV中，并复制父DIV，然后尝试通过将

float:left

应用于第一个父DIV来并排对齐父DIV时，它就不起作用了

这是我的密码：

<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更好？如果是这样，最简单的改变方法是什么

您只需将代码更改为以下内容，为每个

div

display:inline块

然后，只要浏览器窗口大于两个

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分开，以便在内容和表示之间做出明确的区分，并获取它们提供的明确好处

您只需将代码更改为以下内容，为每个

div

display:inline块

然后，只要浏览器窗口大于两个

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分开，以便明确区分内容和表示方式，并获取其带来的明显好处。

您的样式属性之外有

float:left

，尝试将其移动到语音标记内，并对两个父div应用

float:left

如果样式属性之外有

float:left

，请尝试将其移动到语音标记内部，并将

float:left

应用于两个父div

您的

float:left

属性之一位于样式标记之外。此外，您应该使用CSS类，而不是将所有CSS样式内联。它使您的代码更加整洁，并防止大量重复的样式。是最新的小提琴

HTML

您的

float:left

属性之一位于样式标记之外。此外，您应该使用CSS类，而不是将所有CSS样式内联。它使您的代码更加整洁，并防止大量重复的样式。是最新的小提琴

HTML

你的

浮动：左

规则不在

样式

属性值的范围内，这意味着

div

根本不会浮动。您需要将

float

应用于这两个

div

s。您可能会在display:inline block方面比使用float更幸运-我通常将float视为最后的布局，它导致的问题比解决的问题多。提示：使用display:inline块时，通常还需要垂直-align@ajp15243很抱歉，这只是我文章中的一个输入错误，在style属性中不起作用。@rockyraw我评论的第二句话（与文章的第二部分相同）声明您还需要将

float

规则应用于

div

s.@rockyraw请参见Marc答案下的注释。您的

float:left

规则不在

样式

属性值的范围内，这意味着

div

根本不会浮动。您需要将

float

应用于这两个

div

float

规则应用于

div

s.@rockyraw查看Marc答案下的注释。值得注意的是，

display:inline block

将呈现

inline block

元素之间的任何空白，这将导致它们之间可能存在不必要的间隙。谢谢，不过，更好的做法是什么？（我最终会将它们分开，这是为了测试更改）值得注意的是，

display:inline block

将在

inline block

元素之间呈现任何空白，这将导致它们之间可能出现不必要的间隙。谢谢，但更好的做法是什么？（我最终会将它们分开，这是为了测试更改）谢谢！这似乎是可行的（我的float本来在里面，这只是我帖子中的一个输入错误），为什么我需要将它应用于父母双方，而对于图像，它就足够应用于图像了？div有display:block，这意味着他们想自己坐在理论排。浮动克服了这一点。@rockyraw另一方面，文本是内联内容，因此同级浮动元素将推动内联内容。浮动元素不会像默认的

div

那样推送同级块内容（正如Marc所说，块内容将占据整个“行”）。谢谢！T

.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;
}