浮动css元素的麻烦

Question

我的代码存在一些基本问题，我试图获得一个标题和一个段落显示在div内图像的左侧。当我有一个标题时，它工作得非常好，但只要我在段落中抛出任何东西，它就会使图像向下移动并显示上面的段落：

这就是我希望它看起来像

这是它的样子：

这是我的代码：

if ($file == "patch" || $file == "index.php")
    return;

if (is_dir($dir . $file)) {
    $patch = $patch . $file . "/";
    $dir = $dir . $file . "/";
    $files = scandir($dir);

    foreach ($files as $file) {
        if ($file != "." && $file != "..") {
            cp($dir, $file, $patch);
        }
    }
} else {
    $t = mktime(0, 0, 0, date("m"), date("d"), date("Y"));


    if (filemtime($dir . $file) > $t) {
        if (!file_exists($patch))
            mkdir($patch, 0777, true);

        copy($dir . $file, $patch . $file);
    }
}

Answer 1

在图片下添加一个清晰的

<div class="clear"></div>

及其风格

.clear {
    clear:both;
}

您可能需要稍微重新格式化html以获得所需的效果：

 <div class="box3"> 
     <div id="box3left">
         <h2 class="minecrafter">Apply Now</h2>
         <p class="minecrafter" >Lorem ipsum dolor sit amet, mel id fabulas dolorum, lorem vulputate ei his. </p>
     </div>
     <img src="images/applyheretoday.png">
 </div>

和随附的CSS

.box3 #box3left { 
  display: block;
  float:left;
  width: 40%;
 }

.box3 img {
 display: block;
 float: left;
 width: 60% 
  }

你应该根据你想要的大小来调整宽度，并添加你需要的填充/边距。如果可以的话，尽量避免使用内联样式。

Answer 2

如果没有在其他人之前设置width的放置图片，请从h2和p移除浮动：左侧。

<style>
.box3 {
    margin-top:3px;
    margin-left:5%;
    float:left;
    width:65%;
    background:#707070;
    height:300px;
}

.minecrafter {
    font-family:minecrafter;
    color:#FFFFFF;
}
</style>

<div class="box3">
    <img src="images/applyheretoday.png" style="height:90%;float:right;margin-top:13px;margin-right:10px">
    <h2 class="minecrafter" style="padding-left:15px;padding-top:10px;letter-spacing:3px;">Apply Now</h2>
    <p class="minecrafter" style="padding-left:15px;letter-spacing:1px;padding-top:5px;font-size:13px;">Lorem ipsum dolor sit amet, mel id fabulas dolorum, lorem vulputate ei his. </p>
</div>

http://jsfiddle.net/k8reyzhc/

Answer 3

看起来你有太多东西浮出水面。如果你想让IMG在右边，那应该是你需要浮动的唯一东西。你必须首先包括IMG。

以下是更正后的HTML代码：

<div class="box3">
    <img src="images/applyheretoday.png" style="height:90%;float:right;margin-top:13px;margin-right:10px" />
    <h2 class="minecrafter" style="padding-left:15px;padding-top:10px;letter-spacing:3px;">Apply Now</h2>
    <p class="minecrafter" style="padding-left:15px;letter-spacing:1px;padding-top:5px;font-size:13px;">Lorem ipsum dolor sit amet, mel id fabulas dolorum, lorem vulputate ei his. </p>
</div>