css布局 - 分解

Question

所以我试图在750px宽的帧内获得两帧的效果。

.news {width: 750px;}
.news1 {width:550px;}
.news2 {width:200px;}

现阶段非常简单的css。

html / php：

            <div class="news">
            <div class="format"><a href='newspiece.php?news=<?echo $id?>'><?echo "$subject\n";?></a></div>
                <div class="news1">
                    <?
                    echo "<div class='content'>";
                    echo nl2br($comment);
                    echo "<a href='newspiece.php?news=$id'>..[read more]..</a>\n";
                    echo "</div>";
                    ?>
                    <h5><? echo "Posted by <a href=\"userprofile.php?user=$posted\">$posted</a> on $final_date\n";?></h5>
                    <? echo "<br />\n";?>
                </div>
                <div class="news2">
                    <img src="images/news/<? echo $id?>.jpg" />
                </div>
            </div>]

我得到的问题是应该在右边的图像正在下面。所以实际上，news1高于news2，而不是并排。 有什么想法吗？

Answer 1

尝试使用

.news1, .news2 {float: left}

Answer 2

您需要在div上设置float属性：

.news1 {width:550px; float: left;}
.news2 {width:200px; float: right;}