2016-03-31 7 views
-2

2つのdivを互いに隣り合わせに作成しました。(左右)高さはお互いに依存します。 左のdivにマージンがあるアイテムがあれば右のdivのコンテンツに影響しますが、左のdivのマージンを増やしていく間にコンテンツは下がります。 ありがとうございます。コンテンツマージンは、他のディビジョンに依存します。表示テーブル - セルを使用します。

HTML:

<div id="container"> 
<div id="left"> 
    <p class="prag"> 
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
    </p> 
</div> 

<div id="right"> 
<p class="prag2"> 
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
    </p> 
</div> 
</div> 

CSS:

.prag{ 
    margin-top:200px; 
} 
#left{ 
    width:200px; 
    height:auto; 
    display:table-cell; 
    background-color: red; 

} 
#right{ 
    width:200px; 
    height:auto; 
    display:table-cell; 
    background-color: blue; 
} 
+0

私は申し訳ありませんが忘れました –

答えて

0

だけ垂直alingを使用して、メインのdivの表示に追加します。テーブル。

.prag{ 
     margin-top:200px; 
    } 
    #left{ 
     width:200px; 
     height:auto; 
     display:table-cell; 
     background-color: red; 

    } 
    #right{ 
     width:200px; 
     height:auto; 
     display:table-cell; 
     background-color: blue; 
     vertical-align: top; 

    } 
    #container{ 
    display:table; 
    } 
+0

ありがとうございます! –

関連する問題