2

ここで何が間違っているのかわかりません。画像をいくつかの列のテキストと同じ行に配置しようとしていますが、この画像のように下に移動し続けます: http://imgur.com/Hs43rXF . 左の画像は私が望むものですが、右の画像が得られます。

私はすでにdisplay:inlineとfloatを試しましたが、どちらもうまくいきません。これは私のコードです:

.page {
margin-top:50px;
padding-left:50px;
padding-right:50px;
position:relative;
width:1000px;
height:450px;
}
.leftcolumn {
margin-top:50px;
margin-left:0px;
width: 250px;
}
.middlecolumn {
margin-left:300px;
margin-right:320px;
margin-top:50px;
float:left;
display:inline;
}
.verticalimage {
margin-right:0;
margin-top:0;
float:right;
display:inline;
vertical-align:middle;
}

<div class="page">
    <div class="leftcolumn">text <br> text <br> text</div>

    <div class="middlecolumn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem velit. Nullam et metus eget nunc egestas laoreet et quis ligula. Vivamus lobortis sodales pulvinar. Nunc malesuada pretium ornare. Aliquam ut erat at magna pellentesque elementum. Fusce facilisis lorem et tortor euismod bibendum.</div>

    <img class="rightverticalimage" src="picture1.png"/>

</div>

ありがとう。

4

2 に答える 2

0

私はあなたのためにこれを試しました。あなたがコードを理解できるように、私は何かを取り出しました。好きなように編集できます。

CSS

.page {
margin:5%;
width:100%;
height:450px;
}


div {
width:25%;
margin-left:3%;
float:left;
background-color:red;}

div の開始位置と停止位置がわかるように、BG を赤にしました

HTML

<div class="page">

    <div>text <br /> text <br /> text</div>

    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem velit. Nullam 

et metus eget nunc egestas laoreet et quis ligula. Vivamus lobortis sodales pulvinar. Nunc 

malesuada pretium ornare. Aliquam ut erat at magna pellentesque elementum. Fusce facilisis lorem 

et tortor euismod bibendum.</div>

<div>
    <img class="rightverticalimage" src="picture1.png"/>
</div>

</div>

IMG を div に入れて、より適切に制御できるようにします。

FIREBUG を Firefox にダウンロードすることもできます。

于 2013-03-06T04:46:45.297 に答える
0

ここでは、いくつかの異なる方法を混合しています。まず、leftcolumn で気づいたかもしれませんが、div を display:inline にすると、幅が保持されません。これは、幅またはマージンを指定してレンダリングするには、要素がブロック レベルである必要があるためです (デフォルトでは div です)。さらに、左側の div が既に存在する状態で中央の列に左マージンを設定すると、その左側がコンテナー内の 550 ピクセルに設定されます (左の列には 250、左のマージンには追加の 300)。マージンと幅は累積されます。

したがって、これを行う2つの方法は次のとおりです（簡潔にするために余分なマージンを省略しました）：

  1. フロートの使用:

    .leftcolumn
{
    width: 250px;
    float:left;
}

.middlecolumn
{
    width: 250px;
    float:left;
}

    これにより、2 つの div がブロック要素として残り、通常どおりに動作できるようになり、2 つの列に幅を設定し、それらの周りにフローを継続します。画像はインライン要素であるため、フローも継続します。ただし、このアプローチでは、フローティング要素が同じようにページ フローに配置されないため、コンテナを画像要素と同じ高さにします。

  2. ディスプレイの使用: インラインブロック

    .leftcolumn
{
    display: inline-block;
    width: 250px;
}

.middlecolumn
{
    display: inline-block;
    width: 250px;
}

    これにより、divがインラインブロックとして設定され、幅を設定できるようになりますが、インライン要素としてレンダリングされます。これの利点は、.page 要素が div の高さを自動的に取得することです。ただし、インライン ブロック要素が正しくレンダリングされないため、ie7 では機能しません。

両方のアプローチで同じになるため、意図的にイメージ要素に幅を追加したままにしました (display:block を設定してフロートさせるか、display: inline-block を設定するだけです)。

于 2013-03-06T04:51:52.543 に答える