Question

标题基本上说这就是我的css：

#content_container {
  width: 930px;
  padding: 3px;
  margin: 10px;
}
#text_container {
  width: 490px; 
}
p {
  font-size: 14px;
  font-family: Tahoma, Geneva, sans-serif;
  text-align: left;
}       
#side_img {
  background-image: url(../resources/side_img.jpg);
  width:250px;
  height:250px;
  margin-left: 500px;       
}

这是我的HTML：

<div id=content_container>
  <h2> Welkom op de site voor echte stroopwafel liefhebbers! </h2>      
  <div id=text_container>
    <p id=main_text>            
    </p>
  </div>
  <div id=side_img>         
  </div>
</div>

我尝试添加float: left;和float: right;，就像在其他主题中建议一样，但它只是将我的内容从我的主要div中推出。

Answer 1

添加课程 -

<强> DEMO

#text_container{
    width: 490px;
    float:left;
}

#side_img{
    float:right;
    /* margin-left: 500px;*
}

Answer 2

如果我理解你要做什么，花车会起作用，但是你需要清除它们以阻止它们“将内容推出主要的div”。添加clearfix div并浮动图像。

 #text_container{
   width: 490px;
 }
 p{
   font-size: 14px;
   font-family: Tahoma, Geneva, sans-serif;
   text-align: left;
 }
 #side_img{
   background-image: url(../resources/side_img.jpg);
   width:250px;
   height:250px;
   margin-left: 500px; /* remove this */
   float: right; /* add this */
 }
 .clearfix { /* add this */
   clear: both;
 }

 <div id=content_container>
    <h2> Welkom op de site voor echte stroopwafel liefhebbers! </h2>

    <div id=text_container>
        <p id=main_text>

        </p>
    </div>
    <div id=side_img>

    </div>
    <div class="clearfix"></div> <!-- Add this -->
</div>

Answer 3

remove margin-left from #side_img css and add float:left in #text_container css...
id should be defined as id=""

#content_container{
    width: 930px;
    padding: 3px;
    margin: 10px;

    }
.clearfix{
clear:both;
}
        #text_container{
        width: 490px;
        float:left;
        }
            p{
                font-size: 14px;
                font-family: Tahoma, Geneva, sans-serif;
                text-align: left;
            }

        #side_img{
            background-image: url(../resources/side_img.jpg);
            width:250px;
            height:250px;
           /* margin-left: 500px;*/

            }



<div id="content_container">
    <h2> Welkom op de site voor echte stroopwafel liefhebbers! </h2>

        <div id="text_container">
            <p id="main_text">

            </p>
        </div>
        <div id="side_img">

        </div>
<div class="clearfix"></div>
    </div>

文本（div）向下推动图像（div）

3 个答案: