html - 如何使按钮底部与 div 中的 float 属性对齐？

Question

enter image description here HTML:

<div  id="header" class="head">
    <img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
    <map name="image">
        <area shape="circle" coords="50,50,50" href="opendiary.html" />
    </map>
    <a href="profile.html"><button class="menubar btn a1">Profile</button></a><a href="opendiary.html"><button class="menubar btn a2">Open Diary</button></a><a href="message.html"><button class="menubar btn a3">Message</button></a><button class="menubar btn a4">Options</button>

</div>

CSS:

#header {
    min-width:230px;
    max-width:1366px;
    min-height: 100px;
    position:relative;
    border: 2px dashed #dddddd;
    background-color: #555f00
}
#header button {
    display: inline-block;
    position: relative;
    float: left;

}

我希望所有 4 个按钮都在底部对齐。但我不明白怎么办？我看到了其他问题，但是由于 position:absolute 和 float:right 相互重叠，我使用了 4 个按钮。我该如何解决这个问题？

Answer 1

以下内容应该会为您提供所需的结果。 (您仍然需要添加横幅可能需要的任何响应行为(因为它会在较小的屏幕尺寸下中断)

/* for IE9- render these elements correctly */

header,
nav {
  display: block;
}


/* header container */

.head {
  background-color: #555f00;
  border: 2px dashed #ddd;
  max-width: 1366px;
  min-height: 100px;
  min-width: 230px;
  position: relative;
  overflow: hidden;
}

.head__img-area {
  float: right;
}

.propic {
  width: 100px;
  height: 100px;
}

.head__nav-area {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 8px;
}

.head__nav-area .btn {
  display: inline-block;
  /* dummy styling */
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .3);
  padding: 8px;
  color: #fff;
  text-decoration: none;
}

.head__nav-area .btn:hover,
.head__nav-area .btn:focus {
  background: rgba(160, 160, 160, .5);
  border-color: rgba(40, 40, 40, .9);
}

<header id="header" class="head">

  <div class="head__img-area">
    <img src="../../image/a2m.png" alt="propic here" usemap="#image" class="propic" />

    <map name="image">
      <area shape="circle"
        coords="50,50,50"
        href="opendiary.html"
        alt="insert descriptive text here" />
    </map>
  </div>

  <nav class="head__nav-area">
    <a href="profile.html" class="menubar btn a1">
      Profile
    </a>
    <a href="opendiary.html" class="menubar btn a2">
      Open Diary
    </a>
    <a href="message.html" class="menubar btn a3">
      Message
    </a>
    <a href="#" class="menubar btn a4">
      Options
    </a>
  </nav>

</header>

所以上面所做的是根据您的屏幕截图将新的 img-area 包装器 float 到右侧。然后将整个导航容器置于绝对位置，并设置为标题的底部/左侧。

我清理了你那里的链接/按钮组合......在 anchor 元素内有按钮是无效的，所以我把按钮的类放在 <a> 上s 并制作了一些虚拟样式来显示它们。

虽然我使用绝对位置和 float 来实现此布局，但我主要使用它们是因为它们已在您提供的代码中使用。由于您使用的是图像 map ，我猜这可能是一个较旧的元素？基于这个假设，我认为 flex box 不是适合您的解决方案，因为至少需要 IE10 的浏览器支持。

但是，如果您可以使用 flexbox，我强烈建议您查看:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

因为它本可以用来实现这种布局(并且更容易用于响应式网站)

祝你好运!