Question

我想在左边制作一个图像，在右边制作文字。

我将图片放在带有imageClass课程的div中，然后将文本放在带有information课程的div中，然后我将imageClass左浮动和information放在一起右浮。

我也尝试过：

display: inline-block;

对于这两个类，但仍然是你在jsfiddle中看到的结果。

我使用label和input尝试了同样的css，但它确实有用，但我不知道为什么它不能与div和div一起使用。< / p>

另外，我已经给imageClass宽度200和informaton类宽度300和ul宽度500px所以我尽力了

更新1

抱歉，我错误地给了你一个错误的jsfiddle，这是正确的http://jsfiddle.net/VnnZ2/9/

Answer 1

您需要清除浮动以停止父元素折叠。有很多方法。这可能是最容易理解的：

WORKING DEMO

<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;
}

或者这个方法：

WORKING DEMO

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

.clearfix:after {
    clear: both;
}

clearfix类将应用于父元素（li）

Answer 2

检查此更新的代码

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 3

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

另外，请检查此updated Fiddle。

css从左到右制作图像和文字

更新1

3 个答案: