如何在行內排列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

回答

相關問題