股利下推兄弟

Question

的內容我有這樣的設置我的元素http://codepen.io/Py89/pen/QbKgWv?editors=110

HTML：

<div class="container"> 

    <div class="item-container" id="right-block"> 
    <div class="row"> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
    </div> 
    <!-- #Row --> 
    <div class="row"> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
    </div> 
    <!-- #Row --> 
    </div> 
    <!-- #Item container --> 

    <div class="item-container" id="left-block"> 
    <div class="row"> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
      <h3>More text</h3> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
      <h3>More text</h3> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
      <h3>More text</h3> 
     </div> 
     </div> 
     <!-- #Item --> 
    </div> 
    <!-- #Row --> 
    <div class="row"> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
    </div> 
    <!-- #Row --> 
    </div> 
    <!-- #Item container --> 

</div> 

CSS：

.container { 
    *zoom: 1; 
} 
.container:before, .container:after { 
    content: ""; 
    display: table; 
} 
.container:after { 
    clear: both; 
} 

.container { 
    width: 80%; 
    margin: 20px auto; 
    background: rgba(100, 100, 100, 0.4); 
} 

.item-container { 
    float: right; 
    width: 50%; 
} 

.media { 
    background: rgba(30, 40, 50, 0.4); 
    float: right; 
    overflow: hidden; 
    margin: 0 10px 50px; 
    padding: 10px; 
} 
.media .media__item { 
    width: 100%; 
} 
.media .media__item img { 
    margin: 0 auto; 
} 
.media .media__body { 
    width: 100%; 
    padding-top: 10px; 
    overflow: hidden; 
} 

h2 { 
    margin: 0 0 10px; 
    text-align: center; 
} 

h3 { 
    margin: 0; 
    text-align: center; 
} 

#left-block { 
    background: rgba(200, 10, 50, 0.3); 
} 

#right-block { 
    background: rgba(50, 200, 100, 0.3); 
} 

它是在的div在所有可能的第的右邊被推下來的金額與左？

我知道它可以用jQuery/JavaScript來完成，但我很感興趣，如果它可以完成，純粹由CSS。

請記住，我無法更改基本HTML標記。

Answer 1

在這種情況下，最簡單的方法是給容器一個高度。

.media { 
    background: rgba(30, 40, 50, 0.4); 
    float: right; 
    overflow: hidden; 
    margin: 0 10px 50px; 
    padding: 10px; 
    height:420px;//add this 
    } 
//could also place it on '.media .media__body' 

http://codepen.io/maio/pen/PqGjam

Answer 2

或者，您可以添加：

<h3><br></h3> 

到那裏是隻有一行文本的申報單。額外的休息時間會在圖片下方顯示爲兩行文字，所以高度會完全匹配。就像這樣：

這是你與兩行文字DIVS：

<h2>Some text</h2> 
<h3>More text</h3> 

並與一行文本的div補充一點：

<h2>Some text</h2> 
<h3><br></h3> 

我希望它可以幫助... 。

Answer 3

有兩個角度在這裏，對於頁面上的內容類型：

• 動態內容：

  隨着提供的HTML佈局，您不能獲得 期望的結果。這是因爲你有兩個不同的容器 節點（大概是）動態內容，並且沒有辦法在 css中鏈接它們。

• 靜態內容：

  正如maioman說，你可以輕鬆地設置高度爲 容器，但我建議設置爲排級。