Question

我正在尝试使用<div>来管理网页元素的相对位置。我想要以下内容：

Header 1
Some text A...                                    Data B
Some text C...

Header2
Some text D...                                    Data E
Some text F...

我使用的html代码（没有CSS）如下：

<html>
<head/>
<body>
  <div>
    <h1>Header1</h1>
    <div>
      <div style="float: left; width: 70%">
        <p>
          Some text A
        </p>
      </div>
      <div>
        Data B
      </div>
    </div>
    <div style="float: left">
      Some text C...
    </div>
  </div>
  <div>
    <h1>Header2</h1>
    <div>
      <div style="float: left; width: 70%">
        <p>
          Some text D...
        </p>
      </div>
      <div>
        Data E 
      </div>
    </div>
    <div style="float: left">
      <p>
        Some text F...
      </p>
    </div>
  </div>
</body>
</html>

我得到的东西看起来更像是

Header1
Some text A...                                    Data B
                                                  Some text C...
                                                  Header2
Some text D...                                    Data E
                                                  Some text F...

正如您所看到的，＆＃34;某些文字C ...＆＃34;，＆＃34;标题2＆＃34;和＆＃34;某些文字F ...＆＃34;不在我想要的地方。我想我错误地使用<div style="float: left">。我该怎么做？

Answer 1

使用flexbox模型

HTML：

<html>
<head/>
<body>
  <div>
    <h1>Header1</h1>
    <div class='parent'>
      <div style="float: left; width: 70%">
        <p>
          Some text A
        </p>
      </div>
      <div>
        Data B
      </div>
    </div>
    <div style="float: left">
      Some text C...
    </div>
  </div>
  <div>
    <h1>Header2</h1>
    <div class='parent'>
      <div style="float: left; width: 70%">
        <p>
          Some text D...
        </p>
      </div>
      <div>
        Data E 
      </div>
    </div>
    <div style="float: left">
      <p>
        Some text F...
      </p>
    </div>
  </div>
</body>
</html>

CSS：

.parent{
  display : flex;
  justify-content : space around;
  flex-direction : row
}

Answer 2

您遇到的直接问题是Some text A和Some text D都包含在<p>标记中。这是为它们添加默认边距，因此抛弃了您希望浮动发生的位置。

如果您通过Chrome或Firefox开发者工具查看HTML，则突出显示将显示该保证金如何影响您的浮动。

一个简单的解决方法是使用CSS来消除这些项目的边距。

修改：如果您选择使用Flexbox路线，那么justify-content: space-between;可能会更好地满足您的需求。

使用div在html页面中定位元素

2 个答案: