[英]Align two divs (on top of each other) next to one div
我正在嘗試創建一個帶有左側圖像的推薦頁面,然后在右側有一組堆疊的“ div”。 現在看來,它們似乎都按行塊樣式排列了。
這是我的問題的小提琴 。 我對HTML非常非常陌生,因此如果這是一個簡單的解決方法,我深表歉意。
哦,很抱歉,我說在技術上無法處理div時對齊div是我的問題,但我不知道還有什么其他解釋方法。
這是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
}
這是您更正的jsFiddle 。 以下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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.