Question

我基本上在两行上有三个元素 - 一个徽标（350px宽，150px高的图像）和第一行中的文本标题，然后是下一个导航栏。我要做的是让文本与图像的底部对齐，同时让图像位于最左侧，文本位于最右侧。我能够通过使用position：relative＆amp; amp;来获得正确的位置。位置：绝对，但因为我试图使网站响应，当它缩小文本和徽标重叠，它打破。任何帮助将不胜感激！这就是我想要做的 - ＆gt;＆gt;＆gt;

------------------------------------------------------
logo x x x
logo x x x
logo x x x                                  text here
------------------------------------------------------
     navigation bar navigation bar navigation bar

Answer 1

您可以使用CSS使用inline-block轻松实现此目的。只需将所有内容包装在一个父元素中。

.container-element {
  /* some fixed width */
  width:1000px;
}

.image-element,
.text-element {
  display:inline-block;
  vertical-align:bottom;
}

.image-element {
  width:600px;
}

.text-element {
  text-align:right;
  width:400px;
}

.nav-element {
  display:block;
  text-align:center;
}

你的HTML：

<div class="container-element">
  <div class="image-element">
    <img src="..." />
  </div>
  <div class="text-element">
    ...
  </div>
  <div class="nav-element">
    ...
  </div>
</div>

向左浮动图像，右移浮动文本并在底部对齐？

1 个答案: