0

我正在尝试水平对齐两个 div。在尝试了大约 15 种不同的方法后，我仍然无法让它发挥作用。

这就是我的 div 现在对齐的方式

$html .= '<div class="fotoLinks">';
$html .= '  <img src="'.$image->getWebPath().'"/>';
$html .= '</div>';
$html .= '<div class="tekst">';
$html .=    $this->text;
$html .= '</div>';

使用相应的 CSS（div.alinea 是一个包装 div）：

div.alinea
{
    float: left;
    width: 100%;
    margin-bottom: 15px;
}

div.tekst
{
    float: left;
}

div.fotoLinks
{
    float: left;
    margin-right: 15px;
    height: 100%;
}

我希望能从新方法中获得一些灵感。

4

5 回答 5

3

尝试

display: inline-block;

代替float: left;

编辑：

您可以尝试的一种方法，但受支持较少，对于您的包装器 div，设置：

display: table;

对于您的内部 div：

display: table-cell;
于 2012-10-07T11:10:26.690 回答
2

您必须为文本 div 和图像 div 定义宽度，因为它继承了 100% 的父元素宽度。还有很多其他方法/答案，但这会让您调整最少的代码以使其正常工作。

于 2012-10-07T19:14:20.537 回答
0

在 CSS for 中div.tekst，放入clear:both.

于 2012-10-07T11:12:26.050 回答
0

这对我有用：

<html>
<head>
<style>
.ftext {
    border: 1px solid red;
    float:left;
}
</style>
</head>
<body>

<div class="ftext">
This is the left text.
</div>
<div class="ftext">
This follows to the left.
</div>

</body>
</html>

它在左侧文本旁边浮动右侧文本。

于 2012-10-07T11:13:23.793 回答
0

只需给 'tekst' div 一个左边距。我没有对此进行测试，所以我不确定如果不调整其他东西就可以单独修复它。

于 2012-10-07T11:36:00.440 回答