Div들을 어떻게 나란히 놓을까요?

-3

나는이 두 div를 서로 옆에 배치하는 데 어려움을 겪고 있습니다. CSS없이 .html 파일에서이를 해결할 수 있습니까?Div들을 어떻게 나란히 놓을까요?

좀 더 많은 텍스트를 추가해야하기 때문에

<div> 
 
    <div style="float: left"> \t 
 
    <div class="wrapper" style="width: 50%;float: left;"> 
 
     <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;"> 
 
     <article class="box center" style="float: right;"> 
 
      <!-- ################################################################################################ --> 
 
      <div class="btmspace-30"> 
 
      <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p> 
 
      <h2 class="heading font-x2">Urna erat sit amet lacus</h2> 
 
      <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p> 
 
      </div> 
 
      <footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer> 
 
      <!-- ################################################################################################ --> 
 
     </article> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div style="float: left;"> 
 
    <div class="wrapper" style="width: 50%;"> 
 
     <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;"> 
 
     <article class="box center" style="float: right;"> 
 
      <!-- ################################################################################################ --> 
 
      <div class="btmspace-30"> 
 
      <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p> 
 
      <h2 class="heading font-x2">Urna erat sit amet lacus</h2> 
 
      <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p> 
 
      </div> 
 
      <footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer> 
 
      <!-- ################################################################################################ --> 
 
     </article> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div>

: 두 개의 div의 너비의 50 %를해야합니다. 감사합니다

출처

2017-12-23 Simon Kuhn

이 떨어져 빠른 구글 검색이다는 ... – wilsonhobbs

당신은 당신의 실제 코드를 해결하기 위해 해당 컨테이너에 wrapper 아니라 내부의 플로트를 추가해야합니다. 또한 오버 플로우 문제를 방지하기 위해 부모 컨테이너에 overflow:auto을 추가 HTTPS :

<div style="overflow:auto;border:1px solid;"> 
 
<div class="wrapper" style="width: 50%;float: left;"> 
 
    <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;"> 
 
    <article class="box center" style="float: right;"> 
 
     <!-- ################################################################################################ --> 
 
     <div class="btmspace-30"> 
 
     <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p> 
 
     <h2 class="heading font-x2">Urna erat sit amet lacus</h2> 
 
     <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p> 
 
     </div> 
 
     <footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer> 
 
     <!-- ################################################################################################ --> 
 
    </article> 
 
    </div> 
 
</div> 
 
<div class="wrapper" style="width: 50%;float: left;"> 
 
    <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;"> 
 
    <article class="box center" style="float: right;"> 
 
     <!-- ################################################################################################ --> 
 
     <div class="btmspace-30"> 
 
     <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p> 
 
     <h2 class="heading font-x2">Urna erat sit amet lacus</h2> 
 
     <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p> 
 
     </div> 
 
     <footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer> 
 
     <!-- ################################################################################################ --> 
 
    </article> 
 
    </div> 
 
</div> 
 
</div>

출처

2017-12-23 15:33:54

는 내가 지금 가지고있는 것은 이것이다 // gyazo. com/324a12567f31745d071f9f3b404797ad –

상위 요소를 확인하고'overflow : auto'를 추가하십시오. –

@SimonKuhn이 (가) 다시 테스트 할 수있는 답변을 업데이트했습니다. –

사용 display:flex 속성

<div style="display:flex"> 
 
<div style=""> 
 
<div class="wrapper" style=""> 
 
    <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;"> 
 
    <article class="box center" style="float: right;"> 
 
     <!-- ################################################################################################ --> 
 
     <div class="btmspace-30"> 
 
     <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p> 
 
     <h2 class="heading font-x2">Urna erat sit amet lacus</h2> 
 
     <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p> 
 
     </div> 
 
     <footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer> 
 
     <!-- ################################################################################################ --> 
 
    </article> 
 
    </div> 
 
</div> 
 
</div> 
 
<div style=""> 
 
<div class="wrapper" style=""> 
 
    <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;"> 
 
    <article class="box center" style="float: right;"> 
 
     <!-- ################################################################################################ --> 
 
     <div class="btmspace-30"> 
 
     <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p> 
 
     <h2 class="heading font-x2">Urna erat sit amet lacus</h2> 
 
     <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p> 
 
     </div> 
 
     <footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer> 
 
     <!-- ################################################################################################ --> 
 
    </article> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>

출처

2017-12-23 15:33:37

<div> 
    <div style="float: left;width: 50%;"> 
    <div class="wrapper" style="float: left;"> 
    <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;"> 
     <article class="box center" style="float: right;"> 
    <!-- ################################################################################################ --> 
    <div class="btmspace-30"> 
    <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p> 
    <h2 class="heading font-x2">Urna erat sit amet lacus</h2> 
    <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p> 
    </div> 
    <footer><a class="btn medium inverse" href="#">Sit amet turpis</a> 
    </footer> 
    <!-- ################################################################################################ --> 
    </article> 
    </div> 
    </div> 
    </div> 
    <div style="float: left;width: 50%;"> 
    <div class="wrapper" style=""> 
    <div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;"> 
    <article class="box center" style="float: right;"> 
    <!-- ################################################################################################ --> 
    <div class="btmspace-30"> 
    <p class="nospace"><a href="#">Tortor sit amet aliquet</a></p> 
    <h2 class="heading font-x2">Urna erat sit amet lacus</h2> 
    <p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget. 
    </p> 
    </div> 
     <footer><a class="btn medium inverse" href="#">Sit amet turpis</a> 
    </footer> 
    <!-- ################################################################################################ --> 
    </article> 
    </div> 
    </div> 
    </div> 
    </div>

출처

2017-12-23 15:47:45

Div들을 어떻게 나란히 놓을까요?

답변

관련 문제