如何在html中並排顯示兩個div？

請檢查下面如何在html中並排顯示兩個div？

<div style="margin-right: 20%;text-align: justify;float: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam. 
    </div> 
    <div style="margin-left: 80%;float:right;"> 
     <a href="mailto:[email protected]" 
      rel="nofollow noopener noreferrer" 
      target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston 
    </div>

的片段，我不知道爲什麼它不會並排顯示內容的一面呢？相同的代碼在

來源

2016-12-15 sykik

雙方的div需要擴大div的寬度 –

我把七個不同的方法一起放置兩個元素寬度第一元素的文本旁邊對方：HTTPS：//boldewyn.github。 io/grid-example/ – Boldewyn

取出利潤率和u可以使用width和浮並排對準他們身邊。

見example

<div style="width: 65%; text-align: justify; float: left"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam. 
</div> 
      <div style="width: 30%; float:right;"> 
       <a href="mailto:[email protected]" 
        rel="nofollow noopener noreferrer" 
        target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston 
      </div>

來源

2016-12-15 09:57:39 Denisx

刪除邊距並使用display:inline-block並在容器上添加一些寬度。

<div style="display: inline-block; width: 30%; text-align: justify;float: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam. 
     </div> 
     <div style="display: inline-block;float:right;"> 
      <a href="mailto:[email protected]" 
       rel="nofollow noopener noreferrer" 
       target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston 
     </div>

你的小提琴更新： https://jsfiddle.net/atrwq86b/2/

來源

2016-12-15 09:56:27 Troyer

即使我刪除了** display：inline-block **，您的代碼也能正常工作。 – sykik

浮動兩個div的left，並給人留下一個固定寬度（如長文本是使它跑得太遠關閉頁面看到任何改變。同時刪除百分比。利潤率參見更新的代碼：

<div style="text-align: justify;width:100px; float: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam. 
    </div> 
    <div style="float:left;"> 
     <a href="mailto:[email protected]" 
      rel="nofollow noopener noreferrer" 
      target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston 
    </div>

來源

2016-12-15 09:57:52

使用width代替margin和閱讀一些關於如何margin財產作品

。

<div style="width: 80%;text-align: justify;float: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam. 
 
     </div> 
 
     <div style="width: 20%;float:right;"> 
 
      <a href="mailto:[email protected]" 
 
       rel="nofollow noopener noreferrer" 
 
       target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston 
 
     </div>

來源

2016-12-15 09:58:28 Arkej

嘗試這種情況：

來源

2016-12-15 10:09:24 Abood

要顯示側的內容側，除去 '餘量右/利潤率左' 和 '浮動' div的樣式，並將「寬度」和「margin」以及「display：inline-block」樣式應用於div。的代碼已經如下：

<div style="width: 65%; margin:1%; display:inline-block; text-align: justify; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor dapibus ipsum ut efficitur. Aliquam feugiat nec sem dapibus blandit. Nam non faucibus urna, at pulvinar nisl. Aliquam erat volutpat. Ut eget aliquet diam. 
    </div> 
    <div style="width: 30%; margin:1%; display:inline-block;"> 
     <a href="mailto:[email protected]" 
      rel="nofollow noopener noreferrer" 
      target="_blank">[email protected]</a><br>(408) 553-3222<br>Boston 
    </div>

來源

2016-12-15 11:50:55 Pooja

如何在html中並排顯示兩個div？

回答

相關問題