두 개의 div를 html로 나란히 표시하는 방법은 무엇입니까?

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

는 여백을 제거하고 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

플로트 사업부의 모두 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 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

이 시도 :

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

Answer 6

가 나란히 내용면을 표시하려면 '여백 오른쪽/여백 왼쪽'과 '플로트'제거 div의 스타일을 적용하고 'width : margin'및 'display : inline-block'스타일을 div에 적용합니다. 코드는 다음과 같다되었습니다 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>