CSS旁邊的文字塊移動

Question

什麼是最好的方式來做到這一點？

我有一個全寬行（320px）。 160px是一側的圖像，另一個160px是爲文本保留的。這是一個簡單的浮動，還是有一個更具破壞性的方式？

 <div class="two-up_img u-pull-right"> 
      <figure> 
       <img src="../img/img.jpg"> 
      </figure> 
     </div> 

     <div class="two-up_info"> 
      <div class="inner"> 
       <h4 class="highlight">Rob</h4> 
       <div class="small"> 
        <p>Landing Page</p> 
        <p>Brand Identity</p> 
       </div> 
      </div> 
     </div> 

CSS

.two-up_info { 
    height: 160px; 
    background: #fff; 
} 

.two-up_info .inner { 
    text-align: center; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.two-up_img { 
    max-width: 50%; 
} 

我使用了一個名爲骷髏（http://getskeleton.com/）框架，這哪裏是u-pull-right從何而來。它漂浮在右邊的一個元素。

Answer 1

你想包裝你的HTML在父div並將樣式clear: both應用於該父div。

看到這個小提琴：https://jsfiddle.net/5gkzh2pa/

或者，如果你不關心支持舊的瀏覽器，看看Flexbox的：https://css-tricks.com/snippets/css/a-guide-to-flexbox/