Question

对于大多数人来说，这将是一个简单的问题，但我是css的新手。我的问题是我有两个彼此相邻的块浮动，但第二个对象中的文本不会保持在同一行。如何将所有内容放在同一行？

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

另外如何获得“Logo”旁边的“Text2”？现在我只使用 float：right ，但我需要它更接近徽标。我是否将这些元素用在旁边？感谢。

为演示添加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

尝试在.block2中添加h2标签 <div class="block2"><img src="img/logo.jpg"><h2>Text2</h2></div>

参考：jsfiddle.net/08rhr7wx/1 /

Answer 2

我将你的“text2”移到我想你想要的block2里面。

此外，在设置固定宽度时，您需要在min-width上设置wrapper以将这些浮点数保持在1行。

要使“text2”停留在您的徽标旁边，我将其更改为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>

浮动对象中的图像和文本

2 个答案: