Question

如何让这部分布局工作？

我无法解决如何解决这个问题。它变得如此混乱和混乱。

    <div style='width: 900px; margin:0 auto'><div style='float: left; width: 312px; height: 197px; background-color: #A857BC'></div>
    <div style='float: left; width: 249px; height: 197px; background-color: #FF80C0'></div>
    <div style='float: left; width: 339px; height: 197px; background-color: #8C83FC'></div>
    </div><div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>

</div>

    <div style='width: 900px; margin:0 auto'><div style='float: left; width: 362px; height: 197px; background-color: #A857BC'></div>
    <div style='float: left; width: 147px; height: 197px; background-color: #FF80C0'></div>
    <div style='float: left; width: 391px; height: 197px; background-color: #8C83FC'></div>
    </div><div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>
</div>

Answer 1

你有一些迷路的</div>标签，确保它们是平衡的。

Answer 2

立即开始，您将要包含外部样式表。这将使您的生活更轻松。请参阅下面的示例。

http://jsfiddle.net/kSxrK/2/

您能否详细解释一下您想要完成的任务。我看到文字没有出现 - 但你想要它在哪里？

Answer 3

<div style='width: 900px; margin:0 auto'>
  <div style='float: left; width: 312px; height: 197px; background-color: #A857BC'></div>
  <div style='float: left; width: 249px; height: 197px; background-color: #FF80C0'></div>
  <div style='float: left; width: 339px; height: 197px; background-color: #8C83FC'></div>
</div>
<div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>

<div style='width: 900px; margin:0 auto'>
  <div style='float: left; width: 362px; height: 197px; background-color: #A857BC'></div>
  <div style='float: left; width: 147px; height: 197px; background-color: #FF80C0'></div>
  <div style='float: left; width: 391px; height: 197px; background-color: #8C83FC'></div>
</div>
<div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>

或

<div style='width: 900px; margin:0 auto'>
  <div style='float: left; width: 312px; height: 197px; background-color: #A857BC'></div>
  <div style='float: left; width: 249px; height: 197px; background-color: #FF80C0'></div>
  <div style='float: left; width: 339px; height: 197px; background-color: #8C83FC'></div>
  <div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>
</div>

<div style='width: 900px; margin:0 auto'>
  <div style='float: left; width: 362px; height: 197px; background-color: #A857BC'>        </div>
  <div style='float: left; width: 147px; height: 197px; background-color: #FF80C0'></div>
  <div style='float: left; width: 391px; height: 197px; background-color: #8C83FC'></div>
  <div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '>this should be in the middle</div>
</div>

取决于你想要完成的任务。

Answer 4

该代码荒谬凌乱 - 额外的结束标记，内联样式，重复样式，不一致的缩进。此外，你使用单引号 - 虽然没有任何问题，双引号更常见。你应该在你的问题中加入一张图片。

这是我对你想要的目标的最好猜测。

<div style="width:900px; margin:0 auto; position:relative; height:197px">
    <div style="float:left; width:312px; height:100%; background-color:#a857bc"></div>
    <div style="float:left; width:249px; height:100%; background-color:#ff80c0"></div>
    <div style="float:left; width:339px; height:100%; background-color:#8c83fc"></div>
    <div style="background-color: #9cc; position:absolute; top:50px; bottom:50px; left:50px; right:50px">this should be in the middle</div>
</div>
<div style="width:900px; margin:0 auto; position:relative; height:197px">
    <div style="float:left; width:362px; height:100%; background-color:#a857bc"></div>
    <div style="float:left; width:147px; height:100%; background-color:#ff80c0"></div>
    <div style="float:left; width:391px; height:100%; background-color:#8c83fc"></div>
    <div style="background-color: #9cc; position:absolute; top:50px; bottom:50px; left:50px; right:50px">this should be in the middle</div>
</div>

您应该听取有关使用内联样式的其他答案/评论。

如何使这部分布局工作？

4 个答案: