在一個div旁邊對齊兩個div（在彼此之上）

我試圖用左圖創建一個感言頁面，然後右邊有一組堆疊的「div」。現在看起來好像它們都排隊在一起。在一個div旁邊對齊兩個div（在彼此之上）

這是我的問題Fiddle。我對HTML非常非常新，所以我很抱歉如果這是一個簡單的修復。

哦，對不起，我說對齊divs，當它技術上不處理divs是我的問題，但我不知道該怎麼解釋。

下面是HTML

<div class="container"> 
    <div class="content"> 
     <ul> 
      <li> 
       <img src="" width="200" height="200"> 
       <blockquote> 
        This is a testimonial, Normally there would be a quote icon in the upper left but this is just a sample. Anyway, that's the reason for the padding. 
       </blockquote> 
       <cite> 
        <strong>Name</strong> | <span>Business</span> 
       </cite> 
      </li> 
     </ul> 
    </div> 
</div>

而CSS

.container { 
    width: 960px; 
    background-color: #FFF; 
    margin: 0 auto; 
} 
.content { 
    padding: 10px 0; 
} 
ul { 
    padding: 0 15px 15px 40px; 
    list-style-type: none; 
} 
ul li { 
    float: left; 
    clear: both; 
    margin-bottom: 40px; 
} 
img { 
    float: left; 
    border: 1px solid #ccc; 
} 
blockquote { 
    background-image: url(images/icon_quote.png); 
    background-repeat: no-repeat; 
    margin-left: 10px; 
    padding-left: 35px; 
    width: 450px; 
    float: left; 
} 
cite { 
    float: left; 
    margin: 5px 0 0 45px; 
    list-style: none; 
} 
span { 
    font-weight: 400; 
    color: #777 
}

來源

2013-06-04 Geoff

只是包裝您的權利內容與一個DIV和去除浮動和cite

jsFiddle

希望這將解決你的問題問題。

來源

2013-06-04 12:30:24

啊，謝謝，所有這些divs和divs的包裝都會變得非常混亂。 – Geoff

這裏是您更正的。 css更正後。

img { 
    float: left; 
    border: 1px solid #ccc; 
    margin-right:30px; 
} 
blockquote { 
    background-image: url(images/icon_quote.png); 
    background-repeat: no-repeat; 
    /*margin-left: 30px;*/ 
    padding-left: 35px; 
    width: 450px; 
    /*float: left;*/ 
} 
cite { 
    float: left; 
    margin: 5px 0 0 0px; 
    list-style: none; 
}

來源

2013-06-04 12:57:47

在一個div旁邊對齊兩個div（在彼此之上）

回答

相關問題