CSS 두 디브가 서로 옆에 있음

CSS 두 디브가 서로 옆에 있음

두개를 넣고싶습니다.<div>서로 옆에 있는오른쪽<div>x이고 약 200 px다입니다. 그리고 왼쪽입니다.<div>화면 너비의 나머지 부분을 채워야 합니까?이거 어떻게 해요?

flexbox를 사용하여 항목을 배치할 수 있습니다.

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

이것은 기본적으로 플렉스박스의 표면을 긁어내는 것입니다.Flexbox는 꽤 놀라운 일을 할 수 있습니다.

---

이전 브라우저 지원의 경우 CSS float 및 width 속성을 사용하여 해결할 수 있습니다.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

이것이 여전히 현재의 문제인지 아닌지는 모르겠지만 나는 방금 같은 문제에 직면했고 CSS를 사용했습니다.display: inline-block;를 잡을 수 tag. 이것들을 div로 포장하여 적절히 배치할 수 있도록 합니다.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

인라인 스타일 속성을 사용하는 것은 이 예제의 간결성을 위해 사용된 것일 뿐이며 물론 사용된 것들은 외부 CSS 파일로 이동됩니다.

유감스럽게도, 이것은 일반적인 경우에 해결해야 할 사소한 일이 아닙니다.가장 쉬운 방법은 CSS 스타일 속성 "float: right;"를 200px div에 추가하는 것입니다. 그러나 이는 또한 "main" div가 실제로 전체 너비가 되고 200px-div의 가장자리 주변에 텍스트가 떠다니게 되는데, 이는 내용에 따라 종종 이상하게 보입니다(플로팅 이미지인 경우를 제외하고는 모든 경우에 거의 해당됨).

편집: 돔이 제시한 대로 포장 문제는 당연히 마진을 두고 해결할 수 있습니다.바보 같은 나.

@roe 와 @MohitNanda 가 제안하는 방법은 효과가 있지만, 만약 오른쪽 div가 다음과 같이 설정된다면,float:right;, 그러면 HTML 소스에서 먼저 와야 합니다.이렇게 하면 왼쪽에서 오른쪽으로 읽는 순서가 깨지기 때문에 스타일이 꺼진 상태에서 페이지가 표시되면 혼란스러울 수 있습니다.그렇다면 래퍼 디브와 절대 포지셔닝을 사용하는 것이 더 나을 수 있습니다.

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

시연:

left right

편집: 음, 흥미롭네요.미리보기 창에는 올바른 형식의 div가 표시되지만 렌더링된 포스트 항목은 표시되지 않습니다.죄송합니다, 직접 드셔보셔야 할 것 같습니다.

저는 오늘 이 문제에 부딪혔습니다.위의 솔루션을 바탕으로 저는 다음과 같이 해결할 수 있었습니다.

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

부모 디브를 전폭에 걸쳐 놓고 내부에 포함된 디브를 띄우기만 하면 됩니다.

갱신하다

요소를 일렬로 배치해야 하는 경우 Flex Layout을 사용할 수 있습니다.여기 또 다른 Flex 튜토리얼이 있습니다.이것은 훌륭한 CSS 도구이며 100% 호환되지는 않지만 지원이 나날이 향상되고 있습니다.이 작업은 다음과 같이 간단합니다.

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

여기 있는 것은 총 4개 크기의 컨테이너로, 1/4과 3/4의 관계로 아이들과 공간을 공유합니다.

코드펜에서 당신의 문제를 해결하는 예를 들어봤습니다.도움이 되었으면 좋겠습니다.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

아주 오래됨

이건 말도 안 되는 소리일 수도 있지만, 테이블을 써보셨나요?디브 위치 지정에 직접 CSS를 사용하지는 않지만 잘 작동합니다.

1x2 테이블을 만들고 당신의divs안에 있는 다음 CSS로 테이블을 포맷하여 원하는 대로 배치합니다.

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

메모

앞서 말한 것처럼 테이블 사용을 피하고 싶다면,float: left;그리고.float: right;그리고 다음 요소에 a를 추가하는 것을 잊지 마세요.clear: left;,clear: right;아니면clear: both;청소를 하기 위해서요.

div1 {
    float: right;
} 
div2 {
    float: left;
}

설정만 하면 됩니다.clear: both이 두 열 블록을 분리하는 요소에 대해.

저도 같은 문제에 부딪혔는데 모히츠 버전이 작동합니다.html에서 좌-우 순서를 유지하려면 이렇게 해보세요.저의 경우 왼쪽 디브는 사이즈 조절을 하고 있고 오른쪽 디브는 폭 260px에 머물고 있습니다.

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

방법은 메인 상자에 오른쪽 패딩을 사용하되 여백 오른쪽으로 오른쪽 상자를 다시 배치하여 해당 공간을 다시 사용하는 것입니다.

float와 overflow-x:hidden을 혼합하여 사용합니다.최소 코드, 항상 작동합니다.

https://jsfiddle.net/9934sc4d/4/ - 게다가 당신은 당신의 플로트를 치울 필요가 없습니다!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

모두가 지적한 것처럼, 당신은 이것을 할 것입니다.float:right;RHS 내용 및 LHS에 대한 마이너스 마진.

하지만..a를 사용하지 않으면float: left;LHS에서 (Mohit처럼) 그러면 LHS 디바가 레이아웃에서 여유 공간을 사용하기 때문에 스텝핑 효과를 얻을 수 있습니다.

하지만..LHS 플로트는 콘텐츠를 축소 랩핑하므로, 허용할 수 없는 경우 정의된 너비 자식 노드를 삽입해야 합니다. 이때 상위 너비를 정의했을 수도 있습니다.

하지만..David가 지적한 바와 같이 마크업의 읽기 순서를 변경하여 LHS 플로트 요구 사항을 피할 수 있지만, 이는 가독성 및 접근성 문제를 야기할 수 있습니다.

하지만..이 문제는 추가 마크업이 주어지면 플로트로 해결할 수 있습니다.

(cave 위치:해당 예제에서 .clearing div를 승인하지 않습니다. 자세한 내용은 여기를 참조하십시오.)

모든 것을 고려해 볼 때, 우리 대부분은 탐욕스럽지 않은 폭이 존재하기를 바랄 것입니다. CSS3에 남아있기를...

IE7-에서는 지원되지 않기 때문에 모두에게 정답이 되는 것은 아니지만, IE7-에서는 이를 사용한 다음 대체 정답을 사용할 수 있습니다.표시: 테이블, 표시: 테이블 행 및 표시: 테이블 셀입니다.이것은 테이블을 배치에 사용하는 것이 아니라 위에서 오는 번거로움 없이 물건들이 잘 정렬될 수 있도록 디브를 스타일링하는 것입니다.저는 html5 앱이라 잘 작동합니다.

이 기사는 다음과 같은 예를 보여줍니다. http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

스타일시트의 모양은 다음과 같습니다.

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

유사한 작업을 수행하는 내 웹 사이트 중 하나를 의역하려면:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

z 인덱스를 사용하면 모든 것이 잘 맞을 것입니다. 고정 또는 절대 위치로 표시해야 합니다.부유식 꼬리표를 달고 다니는 것처럼 움직이는 것도 움직이지 않을 겁니다

언급URL : https://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other