html - Float image left, float text right and align at bottom?

Question

I basically have three elements on two rows- a logo (image 350px wide by 150px tall)and a text heading in the first row, and then a navigation bar on the next. What I am trying to do is make the text align with the bottom of the image, while having the image in the far left and the text on the far right. I was able to get it in the right position by using position: relative & position: absolute, but since I am trying to make the website responsive when it shrinks down the text and logo overlap and it breaks. Any help would be greatly appreciated! This is what I am trying to make-->>>

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

Answer 1

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

.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>