2016-11-18 41 views
0

我正在尝试在其中创建一个包含两个内联元素的标题,图片和文本。什么我要为(我盘旋两个元素):使用内联元素创建网站登录页面

Landing Page with Inline Elements

我怎么会去吗?我尝试将文本浮动到右侧,但它占用了整个屏幕(不调整大小)。

+1

您需要显示您尝试过的代码。另外,您最好使用flexbox进行这种布局。 – Obromios

回答

0

如果我的理解正确地说,应该有一个朝向图像左侧和右侧的图像,应该有一个描述性文字?

如果是这样的情况下,(在许多之中)一个选项是给margin-left来保存文本,我们应该知道图像的大小做是正确的element

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

+0

谢谢!完美工作! –

0

有很多方法可以做到这一点,但使用网格系统,你就会把两个物体在一排,然后把它们飘浮留下这样的:

* { 
 
-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>