无法将图像adjanct放到div

Question

我有以下HTML：

＆＃13;

＆＃13;

 #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%;
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在说明中添加更多文字会将标题和说明放在下一行。我想要并行显示图像和文字。

Answer 1

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用于图片div。

Answer 2

我希望这个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%;
}

Answer 3

将您的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。