CSS使图像和文本从左到右

Question

我想让图片在左边，文字在右边。

这是一个jsfiddlehttp://jsfiddle.net/VnnZ2/

我把图像放在一个div中，分类为imageClass，我把文本放在一个div中，分类为information，我给imageClass左浮动，information右浮动。

我也试着做这个:

display: inline-block;

，但仍然是您在jsfiddle中看到的结果。

我尝试了相同的css与label和input，它的工作，但我不知道为什么它不与div和div工作。

另外，我已经给imageClass的宽度设置为200,informaton的宽度设置为300,ul的宽度设置为500px，所以我尝试了所有我能做的

更新1

对不起，我给错了jsfiddle，这是正确的http://jsfiddle.net/VnnZ2/9/

Answer 1

查看更新后的代码

HTML:

div class="allRestaurants">
        <ul>
        <li>
            <div class="imageClass">
                <img src="https://www.google.com/images/srpr/logo11w.png"/>
            </div>
            <div class="information">
                nameres                </div>
        </li>
    </ul>
        <ul>
        <li>
            <div class="imageClass">
                <img src="https://www.google.com/images/srpr/logo11w.png"/>
            </div>
            <div class="information">
                Zuma 2                </div>
        </li>
    </ul>
</div>

CSS:

.allRestaurants{
   background-color: #376b66;
   width:100%;
   float:left;
 }
 .allRestaurants ul{
   margin: 10px;
   padding: 0;
   width: 600px;
   background-color: #ffffff;
   margin-left: 10px;
   width:90%;
   overflow:auto;
 }
 .allRestaurants ul li{
    margin-bottom: 10px;
    list-style: none;
    box-sizing: border-box;
    border-radius: 10px;
    -webkit-border-radius: 10px;
 }
 .allRestaurants ul li .imageClass{
    float: left;
 }
 .allRestaurants ul li .imageClass img{
    width: 200px;
    height: 200px;
 }
 .allRestaurants ul li .information{
    width: 250px;
 }
 .allRestaurants ul li{
    float:left;    
    clear:both;
 }

更新的JS FIDDLE CODE

Answer 2

你需要清除你的浮动，以防止父元素崩溃。有很多方法。这可能是最容易理解的:

演示工作

<li>
    <div class="imageClass">
        <img src="https://www.google.com/images/srpr/logo11w.png"/>
    </div>
    <div class="information">nameres</div>
    <div class="clearfix"></div> /* Add an empty element with class .clearfix */
</li>

在你的CSS中:

.clearfix {
    clear: both;
}

---

或者这个方法:

演示工作

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

其中clearfix类将应用于父元素(li)

Answer 3

将overflow: auto;添加到.allRestaurants ul li，这样li就会知道里面有浮动的元素。