Question

说我有以下设计要切片：

enter image description here

我如何通过不使用div的绝对位置和不使用表格布局来切片（如果它们可以被称为布局：））？

Answer 1

您可以float: left或围绕文字制作div，您可以display: inline-block。

Answer 2

制作两个div。左侧包含float: left图像，右侧包含float: right图像。通过这样做，你将有两个彼此相邻的“列”。

但基本上有无穷无尽的解决方案......

Answer 3

我认为这就像这个jsFiddle：

http://jsfiddle.net/cFqDX/

<html>
    <body>
        <div class="mainbody">
            <h1>Some title</h1>
            <img src="http://i.stack.imgur.com/u8Wbq.png" class="leftimage"/>
            <p>
                Putting a lot of text here.
                Putting a lot of text here.
                Putting a lot of text here.
                Putting a lot of text here.Putting a lot of text here.
                Putting a lot of text here.
                Putting a lot of text here.
                Putting a lot of text here.
                Putting a lot of text here.
            </p>
        </div>
    </body>
</html>

对于css。

.mainbody
{
    background-color:gray;
    width:800px;
    height:300px;
}

.leftimage
{
    margin:10px;
    float:left;
}

这给了我以下图片： enter image description here

Answer 4

我在这里制作了一个jsfiddle，我期望它可以在浏览器中很好地工作，并且相当容易维护。

CSS放置示例（标题，图像，文本和阅读更多链接）

4 个答案: