我有以下HTML：无法把图像adjanct于div的

#details { 
 
    padding-top: 2%; 
 
} 
 
#details #big_image { 
 
    width: 400px; 
 
    display: inline-block; 
 
    background: darkred; 
 
} 
 
#details #big_text { 
 
    display: inline-block; 
 
} 
 
#details #big_text span { 
 
    display: block; 
 
} 
 
#details #big_text .title { 
 
    font-weight: bold; 
 
} 
 
#details #big_text .description { 
 
    width: 100%; 
 
}

<div id="details"> 
 
    <div id="big_image"> 
 
    <img src="https://thejewishstar.files.wordpress.com/2009/02/red-apples.jpg" width="400" height="400" alt="" /> 
 
    </div> 
 
    <div id="big_text"> 
 
    <span class="title"> 
 
       <h3>Apple</h3> 
 
      </span> 
 
    <span class="description"> 
 
       An Apple a Day Keeps doctor away.An Apple a Day Keeps doctor away.An Apple a Day Keeps doctor away.An Apple a Day Keeps doctor away. 
 
      </span> 
 
    </div> 
 
</div>

增加在描述更多的文字把标题和描述下一行。我想要同时显示图像和文字。

来源

2015-03-31 Volatil3

是这样的？ http://jsfiddle.net/nmf2p9vs/ – sinisake 2015-03-31 08:03:04

默认情况下，“div”元素将采用父元素的100％宽度。使用浮动样式元素，你可以修改它。这就是在这种情况下造成问题的原因。 – Jackson 2015-03-31 08:17:09

@nevermind您能否将您的评论作为答复？我稍微修改了代码，将'px'更改为'％' – Volatil3 2015-03-31 08:47:14

CSS：

#details 
{ 
    padding-top: 2%; 
} 

#details #big_image 
{ 

    width: 400px; 
    display:block; 
    background: darkred; 
    float:left; 
} 

#details #big_text 
{ 
    display: block; 
} 
#details #big_text span 
{ 
    display: block; 
} 
#details #big_text .title 
{ 
    font-weight: bold; 
} 
#details #big_text .description 
{ 
    width: 100%; 
}

演示：http://jsfiddle.net/nmf2p9vs/

我用display:block，并且float:left图像格。

来源

2015-03-31 08:51:04 sinisake

我希望这个CSS糖果你的需求：

LIVE DEMO

#details 
{ 
    padding-top: 2%; 
} 

#details #big_image 
{ 

    width: 400px; 
    display: inline-block; 
    background: darkred; 
    float: left; 
} 

#details #big_text 
{ 
    display: inline-block; 
     float: left; 
     width: 300px; 
} 
#details #big_text span 
{ 
    display: block; 
} 
#details #big_text .title 
{ 
    font-weight: bold; 
} 
#details #big_text .description 
{ 
    width: 100%; 
}

来源

2015-03-31 08:06:42

改变你的CSS来：

CSS

#details 
{ 
    padding-top: 2%; 
    width:100%; 
    display: block; 
    background: darkred; 
} 
#big_image 
{ 

    width: 60%; 
    display: inline-block; 
    background: darkred; 
    float: left; 
} 

#details #big_text 
{ 
    display: inline-block; 
     float: left; 
     width: 40%; 
} 
#details #big_text span 
{ 
    display: inline-block; 
} 
#details #big_text .title 
{ 
    font-weight: bold; 
} 
#details #big_text .description 
{ 
    width: 100%; 
}

这里是个Fiddle。

来源

2015-03-31 08:48:40 Sushovan

无法把图像adjanct于div的

回答

CSS

相关问题