html - 如何在一行div中排列2个div

Question

我有一个设计，将在另一个更大的 div 内的一行中的描述文本(和链接)旁边排列一张食谱图片。 (名为 col2)现在图像在描述的下方而不是在它的右侧，如果我想要它的话。谢谢。

 .col2{width:60%;
         background-color: #FFD6AD; 
         border-radius:25px
         color:#993D00;
         padding: 10px;}    

            font-size: 18px;}   

.col2 a {text-decoration:none;
            color: #993D00;
            font-weight: bold;
            font-size:20px;}        

.col2 p { max-width:500px;}

.thumb {max-width: 400px;}          

.recipe {max-width: 60%;

            display: -moz-inline-stack;
            display: inline-block;}     

使用 HTML

<div class="col2">  
<div "info"> Leckeres essen für wehnig Geld. Es gibt viele Gerichte die
ziemlich günstig sind und trozdem schmecken. </div> 

<div class="recipe"> 
    <div>
        <a href="3bohnen.html"> Chillie aus getrockneten Bohnen </a> 
            <p>Chillie sin carne, oder vegitarisches Chillie .....) </p>
    </div>
    <div class="thumb"> <img src="img/sm-chilly.jpg" alt="chilli sin carne">
        </div>
</div>

Answer 1

一般的解决方案是将图像向右浮动，并使用 % 限制其宽度。 Online Demo .

<div class="col2">
    <div class="thumb">
        <img src="img/sm-chilly.jpg" alt="chilli sin carne">
    </div>
    <div "info">Leckeres essen für wehnig Geld. Es gibt viele Gerichte die ziemlich günstig sind und trozdem schmecken.</div>
    <div class="recipe">
        <div> <a href="3bohnen.html"> Chillie aus getrockneten Bohnen </a> 
            <p>Chillie sin carne, oder vegitarisches Chillie .....)</p>
        </div>
    </div>
    <div class="clear"></div>
</div>

使用 CSS:

 .col2 {
     width:60%;
     background-color: #FFD6AD;
     border-radius:25px color:#993D00;
     padding: 10px;
 }
 font-size: 18px;
}
.col2 a {
    text-decoration:none;
    color: #993D00;
    font-weight: bold;
    font-size:20px;
}
.col2 p {
    max-width:500px;
}
.thumb {
    float: right;
    max-width: 40%;
}
.thumb img {
    max-width: 100%;
}
.recipe {
    max-width: 60%;
}
.clear {
    clear: both;
}