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

Question

請檢查下面的代碼段

<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@example.com"
           rel="nofollow noopener noreferrer"
           target="_blank">Email@example.com</a><br>(408) 553-3222<br>Boston
    </div>

我不知道為什么它不能並排顯示內容？ https://jsfiddle.net/atrwq86b/上有相同的代碼

Answer 1

刪除邊距並使用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@example.com"
               rel="nofollow noopener noreferrer"
               target="_blank">Email@example.com</a><br>(408) 553-3222<br>Boston
        </div>

您的提琴已更新： https ： //jsfiddle.net/atrwq86b/2/

Answer 2

刪除邊距，您可以使用width和float使其並排對齊。

看例子

<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@example.com"
                   rel="nofollow noopener noreferrer"
                   target="_blank">Email@example.com</a><br>(408) 553-3222<br>Boston
            </div>

Answer 3

要並排顯示內容，請刪除div的'margin-right / margin-left'和'float'樣式，並同時將'width'和'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@example.com"
           rel="nofollow noopener noreferrer"
           target="_blank">Email@example.com</a><br>(408) 553-3222<br>Boston
    </div>

Answer 4

浮動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@example.com"
           rel="nofollow noopener noreferrer"
           target="_blank">Email@example.com</a><br>(408) 553-3222<br>Boston
    </div>

Answer 5

使用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@example.com" rel="nofollow noopener noreferrer" target="_blank">Email@example.com</a><br>(408) 553-3222<br>Boston </div> 

Answer 6

嘗試這個：

 <div style="width: 75%;text-align: justify;display:inline-block; vertical-align: text-top;">Fisrt DIV</div> <div style="width: 20%;display:inline-block; vertical-align: text-top;">Second DIV</div>