Question

如何在此页面上实现类似的块结构：http://www.sovietrussia.org/o

基本上我需要一个块（如图像）在左边，所有其他块占据所有右侧和下方100％宽度。如果右侧的块通过左侧图像块，则它将低于它并占据页面宽度100％

Answer 1

这将在左侧设置您的图像，在图像右侧设置所有剩余文本.....！

   <html>
    <head>
    <style type="text/css">
    .setwet{
    float:left;
    vertical-align:top;
    }
    .setwetpic{
    float:left
    }
    br{
    clear:both;
    }
    </style>
    </head>
    <body>
    <div>
        <span class="setwetpic"><img src="image.gif" /></span><span class="setwet">Name:waqas <br />Auther: Waqas</span><br/><span class="setwetpic"><img src="image.gif" /></span><span class="setwet">Name:waqas <br />Auther: Waqas</span>

    </div>
      </body>

</html>

Answer 2

使用style="float: left;"浮动图像。一切都将向右倾斜。如果要强制所有内容都为全宽，请放置一个带style="clear: bloth;"的元素以清除浮动。

Answer 3

考虑使用CSS网格布局系统

http://www.gridsystemgenerator.com/

有4个不同的可用

帮助无表设计（浮动div）

3 个答案: