CSS를 사용하여 Div를 2 개의 열로 분할

CSS를 사용하여 div를 두 개의 열로 분할하려고 시도했지만 아직 작동하지 않았습니다. 내 기본 구조는 다음과 같습니다.

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

오른쪽 및 왼쪽 div를 각각의 위치 (오른쪽 및 왼쪽)로 플로팅하려고하면 콘텐츠 div의 배경색을 무시하는 것 같습니다. 그리고 여러 웹 사이트에서 시도한 다른 코드가 내 구조로 번역되지 않는 것 같습니다.

도움을 주셔서 감사합니다!

이 두 div를 플로팅하면 콘텐츠 div가 높이가 0으로 축소됩니다. 그냥 추가

<br style="clear:both;"/>

#right div 뒤에 있지만 콘텐츠 div 안에 있습니다. 그러면 콘텐츠 div가 두 개의 내부 부동 div를 둘러 싸게됩니다.

이것은 나를 위해 잘 작동합니다. 화면을 20 %와 80 %의 두 부분으로 나눴습니다.

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

이를 수행하는 또 다른 방법 overflow:hidden;은 부동 요소의 상위 요소에 추가 하는 것입니다.

overflow : hidden은 요소가 부동 요소에 맞게 커지도록합니다.

이렇게하면 다른 html 요소를 추가하는 대신 CSS로 모두 수행 할 수 있습니다.

이를 수행하는 가장 유연한 방법 :

#content::after {
  display:block;
  content:"";
  clear:both;
}

이것은 #content에 요소를 추가하는 것과 정확히 동일하게 작동합니다.

<br style="clear:both;"/>

그러나 실제로 요소를 추가하지 않고. :: after는 의사 요소라고합니다. 이것이 overflow:hidden;#content에 추가 하는 것보다 더 나은 유일한 이유 는 절대 위치에있는 자식 요소가 오버플로되고 여전히 표시 될 수 있기 때문입니다. 또한 상자 그림자를 계속 볼 수 있습니다.

주어진 답변 중 어느 것도 원래 질문에 대한 답변이 없습니다.

문제는 css를 사용하여 div를 2 개의 열로 분리하는 방법입니다.

위의 모든 답변은 실제로 2 개의 열을 시뮬레이션하기 위해 2 개의 div를 단일 div에 포함합니다. 동적 방식으로 콘텐츠를 2 개의 열에 넣을 수 없기 때문에 이것은 나쁜 생각입니다.

따라서 위의 대신 다음과 같이 CSS를 사용하여 2 개의 열을 포함하도록 정의 된 단일 div를 사용하십시오.

.two-column-div {
 column-count: 2;
}

위의 클래스를 div에 할당하면 실제로 내용이 2 개의 열로 흐릅니다. 더 나아가 여백 사이의 간격도 정의 할 수 있습니다. div의 내용에 따라 내용이 열 사이에서 잘리지 않도록 단어 구분 값을 엉망으로 만들어야 할 수도 있습니다.

어떤 이유로 든 정리 방법이 마음에 들지 않았기 때문에 이와 같은 작업에는 부동 소수점 및 백분율 너비에 의존합니다.

다음은 간단한 경우에 작동하는 것입니다.

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; } 

일부 콘텐츠를 넣으면 작동하는 것을 볼 수 있습니다.

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

여기에서 볼 수 있습니다 : http://cssdesk.com/d64uy

어린이 div를 만들면 inline-block나란히 배치됩니다.

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

데모 보기

나는이 게시물이 오래되었다는 것을 알고 있지만 여전히 더 간단한 해결책을 찾고있는 사람이 있다면.

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}

div를 수직으로 나누는 가장 좋은 방법-

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}

flexbox 를 사용 하여 div 요소의 레이아웃을 제어 할 수 있습니다 .

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}

<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>

플로트는 흐름에 영향을주지 않습니다. 내가하는 경향은

<p class="extro" style="clear: both">possibly some content</p>

'wrapping div'(이 경우 내용)의 끝에. 나는 그러한 단락이 필요할 수 있다고 말함으로써 의미 론적으로 이것을 정당화 할 수있다. 또 다른 접근 방식은 clearfix CSS를 사용하는 것입니다.

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

주석의 속임수는 브라우저 간 호환성을위한 것입니다.

여기에 가장 적합한 답변입니다. 질문 211383

요즘, 자존심이 강한 사람은 플로트 청소에 대해 명시된 "마이크로 클리어 픽스"접근 방식을 사용해야합니다.

1. 부모 DIV에서 글꼴 크기를 0과 같게 만듭니다.

2. 각 하위 DIV의 너비 %를 설정합니다.

   #content {
       font-size: 0;
   }
   
   #content > div {
       font-size: 16px;
       width: 50%;
   }
   

* Safari에서 작동하려면 49 %를 설정해야 할 수 있습니다.

분할을 두 열로 나누는 것은 매우 쉽습니다. 이것을 넣으면 열 너비를 더 잘 지정하고 (예 : width : 50 %) 왼쪽 열에는 float : left, 오른쪽 열에는 float : right를 설정하면됩니다.