html - float 对象中的图像和文本

Question

对于你们中的大多数人来说，这将是一个简单的问题，但我是 CSS 的新手。我的问题是我有两个 block 彼此相邻且带有 float 但第二个对象中的文本只是不在同一行。如何让所有内容都在同一行？

它应该是什么样子: blocks实际上一切正常，直到出现“Text2”或者我尝试调整“Logo”填充，然后“Text2”移动到下一行，如 this .

另外，如何在“Logo”旁边显示“Text2”？现在我只让它与 float:right 一起工作，但我需要它更靠近 Logo 。我对这些元素使用 aside 吗？谢谢。

为演示添加 js fiddle url:http://www.jsfiddle.net/08rhr7wx/

HTML:

<aside>
<div class="wrapper">
<div class="block1">
<h2>Text1</h2>
</div>
<div class="block2"><img src="img/logo.jpg"></div>
<h2>Text2</h2>
</div>
</aside>

CSS:

.wrapper {
  overflow: hidden;
}

.wrapper div {
  height: 55px;
  margin-top: 20px;
}

.wrapper .block1 {
  float: left;
  margin-left: 20px;
  background: #390b5d;
  width: 555px;
}   

.wrapper .block1 h2 {
  padding-left: 20px;
  padding-top: 13px;
}

.wrapper .block2 {
  float: left;
  width: 325px;
  background: #e26c34;
  padding-left: 20px;
}

.wrapper .block2 h2 {
  float: right;
  padding-right: 20px;
}

Answer 1

我将你的“text2”移到了 block2 我猜你想要的地方。

此外，当像您一样设置固定宽度时，您需要在 wrapper 上设置一个 min-width 以将这些 float 保持在 1 行中。

为了让“text2”留在您的 Logo 旁边，我将其更改为 display: inline 而不是默认的 display: block。

注意:您真正应该尝试的是重新构建您的代码，使其更具响应性。

.wrapper {
  min-width: 1000px;
  overflow: hidden;
}

.wrapper div {
  height: 55px;
  margin-top: 20px;
}

.wrapper .block1 {
  float: left;
  margin-left: 20px;
  background: #390b5d;
  width: 555px;
}   

.wrapper .block1 h2 {
  padding-left: 20px;
}

.wrapper .block2 {
  float: left;
  width: 325px;
  background: #e26c34;
  padding-left: 20px;
}

.wrapper .block2 h2 {
  display: inline
}

<aside>
  <div class="wrapper">
    <div class="block1">
      <h2>Text1</h2>
    </div>
    <div class="block2">
      <img src="img/logo.jpg">
      <h2>Text2</h2>
    </div>
  </div>
</aside>

根据要求，第二个样本进行了一些重组。

.wrapper {
  min-width: 1000px;
  overflow: hidden;
}

.wrapper div {
  height: 55px;
  margin-top: 20px;
}

.wrapper .block1 {
  float: left;
  margin-left: 20px;
  background: #390b5d;
  width: 555px;
  line-height: 55px;
}   

.wrapper .block1 span {
  font-size: 24px;
  padding-left: 20px;
  color: white;
}

.wrapper .block2 {
  float: left;
  width: 325px;
  background: #e26c34;
  padding-left: 20px;
  line-height: 55px;
  vertical-align: middle;
}

.wrapper .block2 span {
  font-size: 24px;
  padding-left: 20px;
  vertical-align: middle;
  display: inline-block;
}

.wrapper .block2 img {
  vertical-align: middle;
  display: inline-block;
}

<aside>
  <div class="wrapper">
    <div class="block1">
      <span>Text1</span>
    </div>
    <div class="block2">
      <img src="http://lorempixel.com/30/30/technics/5/"><span>Text2</span>
    </div>
  </div>
</aside>