2016-11-18 62 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>