使用内联元素创建网站登陆页面

Question

我正在尝试创建一个 header，其中包含两个内联元素，图片和文本。我要做什么（我把两个元素圈起来了）：

我该怎么做？我尝试将文本向右浮动，但它占据了整个屏幕（未调整大小）。

Answer 1

有很多方法可以做到这一点，但是使用网格系统，您可以将两个对象排成一行，然后像这样将它们向左浮动：

* {
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
}

.row {
width: 100%;
  clear: both;
  border: 1px solid blue;
}

.onehalf {
width: 50%;
  float: left;
  border: 1px solid red;
}

<div class="row">
<div class="onehalf">THING ONE</div>
  <div class="onehalf">THING TWO</div>
</div>

Answer 2

如果我没理解错的话，图片的左端和右端应该有一个图像，应该有一个描述性的文字？

如果是这种情况，（在众多选择中）一个选择是给 element 一个 margin-left 来保存文本，我们应该知道 size 正确执行图像：

.header {
  background: url(" http://placehold.it/350x350") no-repeat;
}
.content {
  margin-left: 355px;
}

<div class="header">
  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. End!
  </div>
</div>

使用内联元素创建网站登陆页面

Creating a Website Landing Page with Inline Elements

html

css

element

header

block