Question

我在学习HTML和CSS之后一直在做一个项目（还没有学过JavaScript，但我很快就会开始学习），而且我遇到了一个小问题。

我正在尝试使用两个div框（左右对齐，均为45％宽度），然后在其下方有一个45％宽度的居中div框。它在技术上有效，但问题是当左侧和右侧框下方的居中div框时，只有一半是。另一半倒入上方左右方框的边缘。

这就是我的HTML代码对这3个框的看法：

    <div class="left-align">
        <p class="medium-font">
            This box is <b>left-aligned</b>, so it'll be much less wide than other boxes.
        </p>
    </div>

    <div class="right-align">
        <p class="medium-font">
            This is box <b>right-aligned</b>, so it'll also be much less wide, however it's on the right now.
        </p>
    </div>

    <div class="center-align medium-font dotted-border bg-dkred">
        <form>
            <span>Form test thing i dunno</span>
            <p>Favorite gemstone:</p>
            <input type="text" name="fav-gem" value=""><br/>
        </form>
    </div>

我的对齐CSS代码：

div.right-align
{
    width:45%;
    float:right;
}

div.left-align
{
    width:45%;
    float:left;
}

div.center-align
{
    width:45%;
    margin:0 auto;
}

我尝试将两个左右框放在他们自己的元素中，但这没有任何区别。

感谢任何帮助，如果您需要，我可以提供更多信息。

Answer 1

因为你有float元素，所以它被第3个div（下面的一个）忽略，只需将clear: both添加到第3个div就可以在这个元素的两边不允许使用float元素。

clear CSS属性指定元素是否可以位于其前面的浮动元素旁边，或者必须向下移动（清除）。 clear属性适用于浮动和非浮动元素。   例如：



参考：https://developer.mozilla.org/en/docs/Web/CSS/clear

＆＃13;

div.right-align {
  width: 45%;
  float: right;
  background: red;
}

div.left-align {
  width: 45%;
  float: left;
  background: aqua;
}

div.center-align {
  width: 45%;
  margin: 0 auto;
  background: green;
  clear: both;
}

＆＃13;

<div class="left-align">
  <p class="medium-font">
    This box is <b>left-aligned</b>, so it'll also be much less wide, however it's on the left now.
  </p>
</div>

<div class="right-align">
  <p class="medium-font">
    This is box <b>right-aligned</b>, so it'll also be much less wide, however it's on the right now.
  </p>
</div>

<div class="center-align medium-font dotted-border bg-dkred">
  <form>
    <span>Form test thing i dunno</span>
    <p>Favorite gemstone:</p>
    <input type="text" name="fav-gem" value=""><br/>
  </form>
</div>

＆＃13;

居中的<div>框与

1 个答案: