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

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에 추가 하는 것보다 더 나은 유일한 이유 는 절대 위치에있는 자식 요소가 오버플로되고 여전히 표시 될 수 있기 때문입니다. 또한 상자 그림자를 계속 볼 수 있습니다.

---

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

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

#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%;
}

데모 보기

---

div를 세로로 나누는 가장 좋은 방법-

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

---

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

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

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

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

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

assign the above as a class to a div, and it will actually flow its contents into the 2 columns. You can go further and define gaps between margins as well. Depending on the content of the div, you may need to mess with the word break values so your content doesn't get cut up between the columns.

---

I know this post is old, but if any of you still looking for a simpler solution.

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

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

---

Floats don't affect the flow. What I tend to do is add a

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

at the end of the 'wrapping div' (in this case content). I can justify this on a semantic basis by saying that such a paragraph might be needed. Another approach is to use a clearfix CSS:

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

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

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

The trickery with the comments is for cross-browser compatibility.

---

This is best answered here Question 211383

These days, any self-respecting person should be using the stated "micro-clearfix" approach of clearing floats.

---

1. Make font size equal to zero in parent DIV.

2. Set width % for each of child DIVs.

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

*In Safari you may need to set 49% to make it works.

---

Divide a division in two columns is very easy, just specify the width of your column better if you put this (like width:50%) and set the float:left for left column and float:right for right column.

---

You can use flexbox to control the layout of your div element:

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

참고URL : https://stackoverflow.com/questions/1964297/split-div-into-2-columns-using-css