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并浮动以将它们并排排列。

请参阅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@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并给左边的一个固定宽度（因为长文本使它离页面太远而看不到任何变化。同时删除百分比边距。请参阅更新的代码：< / p>

<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

试试这个：

 select    track_id

 from      t2

 where     name in ('a1','b1','c2','c3')

 group by  track_id

 having    count(case when name = 'a1' then 1 end) = 1 
       and count(case when name = 'b1' then 1 end) = 1  
       and count(case when name in ('c2','c3') then 1 end) > 0
;

如何在html中并排显示两个div？

6 个答案: