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个按钮都在底部对齐。但我不明白怎么样？我已经看到了其他问题，但因为我使用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包装器向右浮动。然后整个导航容器位置绝对并设置在标题的底部/左侧。

我清理了那里的链接/按钮组合......在锚元素中有按钮是无效的，所以我将按钮的类放在<a>上并组成了一些虚拟样式显示它们。

虽然我使用position绝对和浮动来实现这种布局，但我主要使用它们，因为它们在您提供的代码中使用。既然你正在使用图像地图，我猜这可能是一个较旧的项目？基于这个假设，我认为flex box不适合你，因为至少需要IE10来支持浏览器。

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

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

祝你好运！

Answer 2

使用div容器覆盖所有按钮，并为此div容器提供一些CSS。这可以看到这样的结尾：

＆＃13;

#header {
    min-width: 230px;
    max-width: 1366px;
    min-height: 100px;
    position: relative;
    border: 2px dashed #dddddd;
    background-color: #555f00
}
#header .buttons {
    position: absolute;
    left: 0;
    bottom: 0;
}

/* To replace the <a> link */
#header .buttons form {
  display: inline;
}
/* To style the <a> link more like a <button> */
#header .buttons a {
  font: bold 13px sans-serif;
  text-decoration: none;
  background-color: #E0E0E0;
  color: black;
  padding: 2px 6px 2px 6px;
  border: 1px solid #CCC;
  border-right-color: #333;
  border-bottom-color: #333;
  font-weight: normal;
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
}

＆＃13;

<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>
    <div class="buttons">
        <a href="profile.html" class="menubar-link">
            Profile
        </a>
        <form action="opendiary.html" method="get">
            <button type="submit" class="menubar btn a2">Open Diary</button>
        </form>
        <form action="message.html" method="get">
            <button type="submit" class="menubar btn a3">Message</button>
        </form>
        <button class="menubar btn a4">Options</button>
    </div>
</div>

＆＃13;

Float通常被认为是不好的做法。因此，请尽量避免使用此选项。另外，你不应该使用＆lt; button＆gt;标签内＆lt; a＆gt;标签。我添加了两种可能的方法来避免这种情况。

这个答案对我有帮助：Answer to: How to align content of a div to the bottom?

Answer 3

将按钮及其容器包裹在一个div中，该位置为绝对位置并将其对齐。

＆＃13;

#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;
}
/**Added this**/
.btn-cont {
  position: absolute;
  bottom: 0;
 /** right: 0; this is to align buttons right**/
}
/**Uncomment this to float image right
img {
  float: right;
 }

＆＃13;

<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>
    <div class="btn-cont"><!--Added this div-->
    <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>
</div>

＆＃13;

如何在div中使用float属性对齐底部的按钮？

3 个答案: