Question

我正在尝试创建一个基础div，我可以根据需要将其复制多次，以便在我想要向我的网站添加新内容时。所以Html看起来像这样：

<div class="post">
<p class="date">17/03/1014</p>
<h1>Hello World!</h1>
<p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl 
</p>
</div>
<div class="postImage"><img src="images/car.jpg" width="300" alt="car></div>

然后我的css看起来像这样：

   .post{
    width:960px;
    margin:0 auto;
    color:#000;
    background-color:#CCC;
    font-family:Verdana, Geneva, sans-serif;


    /*CSS3*/
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;

    -webkit-outline: 1px dashed #000000;
    -moz-outline: 1px dashed #000000;
    outline: 1px dashed #000000;

    -webkit-outline-offset: -5px;
    -moz-outline-offset: -5px;
    outline-offset: -5px;
    behavior:url(PIE.htc);


}

.post p.postText {
    width:500px;
    padding-left:10px;
    padding-bottom:10px;
}


.post p.date{
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    padding-top:10px;
    padding-left:10px;

}

.postImage {
    display:block;
    float:left;
}

如果你测试它，图像不会漂浮在文本的右边，而是在它下面。关于发生了什么的任何想法？

Answer 1

如果这是您确切的HTML，则会出现多个错误。不确定这是否能完全解决您的问题，但您需要以任何方式修复HTML。

<div class="post">
    <p class="date">17/03/1014</p> <!-- Was </div> -->
    <h1>Hello World!</h1> <!-- Was </div> -->
    <p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl</p>
</div> <!-- Was missing -->

<div class="postImage">
    <img src="images/car.jpg" width="300" alt="car>
</div>

Answer 2

我为你做了一个JSFiddle。

http://jsfiddle.net/FRDKL/

我发现了大量的HTML错误，例如：

<img src="images/car.jpg" width="300" alt="car>

你好忘了＆＃34;在您的ALT结束时。我希望这会有所帮助：

http://jsfiddle.net/FRDKL/

Answer 3

尝试从简单开始 - 先让你的定位正确，然后添加填充，边框，/ CSS3 / stuff。 http://jsfiddle.net/bEECn/

有很多方法可以实现这一目标，但我认为将文本内容包装在容器中并浮动可能是最直接的。

<div class="post">
    <div class="content-wrap">
        <p class="date">17/03/1014</p>
        <h1>Hello World!</h1>
        <p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl</p>
    </div>
    <div class="postImage">
        <img src="http://lorempixel.com/300/300" width="300" alt="car" />
    </div>
</div>

然后，这个简单的CSS：

.content-wrap, .postImage {
    float: left;
}

从那里，您可以添加其他样式。

Float：没有在动态内容div上工作

3 个答案: