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

考虑在文本之前添加图像并将其对齐到左侧如果您不希望它继续使用新行，请使用span而不是div

例如

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

Answer 2

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

如何排成一行div内的2个div

2 个答案: