仅使用css更改页面布局（不更改DOM放置）

Question

我有一个由于某些原因无法改变的结构。这就是结构：

<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width: 200px; height: 200px; background: #f1f1f1">container</div>

我想只使用CSS来获得这种特殊的布局，即。没有位置，负边距等.HTML元素将保留在同一个流程中 - h1，p和div。有可能这样做吗？

Answer 1

这对你有用。主要是将float: left放在左侧div。

<style type="text/css">
    #wrapper {
        width: 90%;   
    }
    #container {
        float: left;
        width: 200px;
        height: 150px;
        background-color: #666;   
        margin: 0 10px 10px 0;
    }
    H1 {
        font: bold 2em arial;
    }
    P {
        background-color: #ccc;  
    }
</style>

<div id="wrapper">
    <div id="container">#container</div>
    <h1>Heading</h1>

    <p>
        Some text.
    </p>
</div>

Example fiddle

Answer 2

当然你只能在CSS中做到这一点！ ：）

我知道这是一个老问题，但这是一个有趣的挑战。诀窍是在h1之前创建一个伪元素，它向左浮动以创建容器div的空间。

我确信还有很多其他方法可以做到这一点......

div {
  position:absolute;
  top:0;
}
h1::before {
  content:'';
  float:left;
  width:200px;
  height:200px;
  margin-left:20px;
}

<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width:200px; height:200px; background:#f1f1f1">container</div>