0

2 つの 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

親要素の幅 100% をそのまま継承するため、テキスト div と画像 div の幅を定義する必要があります。他にもたくさんの方法/答えがありますが、これにより、コードを最小限に調整して正しく機能させることができます。

于 2012-10-07T19:14:20.537 に答える
0

「tekst」divに左マージンを与えるだけです。私はこれをテストしなかったので、他の何かを調整せずにそれだけで修正できるかどうかはわかりません.

于 2012-10-07T11:36:00.440 に答える
0

のCSSに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 に答える