htmlに2つの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> 

以下のスニペットを確認してください？ 同じコードがあります​​

Answer 1

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

Answer 2

余白を削除し、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 3

フロート両​​方のdivのleftを参照し、長いテキストは、それがどんな変化を見るためにページをオフすぎ実行作っていたように、左1に固定幅を（与える。また割合を削除。マージン更新されたコードを参照してください：

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

使用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 5

これを試してみてください：

​​

Answer 6

が並んでコンテンツ側を表示するには、 'マージン右/のmargin-left' と 'フロート' を削除divのスタイルを適用し、 'width'と 'margin'だけでなく、両方のdivに 'display：inline-block'スタイルを適用します。 次のコードは与えられています。https：：

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