如何在行内排列2个div div

我有一个设计思路，将排列在另一个更大的div内的行中的描述文本（和链接）旁边的食谱图片。（命名为col2），现在图像位于描述的下方，而不是右侧，我是否希望拥有它。谢谢。如何在行内排列2个div div

.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>

来源

2015-10-21 Pixi

的一般的解决办法是将图像浮到右侧，并使用%限制其宽度。 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; 
}

来源

2015-10-21 19:06:31 Fenton

考虑文本之前添加图像，如果不是格将其调整到左侧使用范围，如果你不希望它继续换行

示例

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

来源

2015-10-21 19:04:13

如何在行内排列2个div div

回答

相关问题