在一个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（在彼此之上）

回答

相关问题