CSS - 다른 div 주위로 플로트 자식 div

동적으로 다른 div의 높이를 기반으로 내 자식 div의 너비를 조정하고 싶습니다. 설명하기가 쉽지 않아 일부 사진을 보여 드리겠습니다 ...CSS - 다른 div 주위로 플로트 자식 div

첫 번째 이미지에서 검은 색 사각형은 제 "부모"div입니다. 높이가 다른 div가 포함되어 있습니다. 파란색 div의 높이는 정적이지만 오른쪽에 떠 있어야합니다. 빨간색 div는 내가 문제가있는 것들입니다. 파란색 div의 아래쪽에 있으면 자동으로 너비를 조정해야합니다.

작은 높이의 두 번째 빨간색 div입니다. 마지막 div가 어떻게 부모 div의 너비에 맞는 지 확인하십시오.

더 큰 높이의 두 번째 빨간색 div. 이제 하단 두 div의 너비가 부모 div에 맞습니다. 내가 어떻게 사업부의의를 구성하는 특별한 위치를 사용하거나 할 필요가있는 경우

하나 더 예 ...

나는 확실하지 않다. 파란색 div 아래에 약간의 공간이 있으면 괜찮을 것이고, 단지 빨간색 div 사이에 같은 양의 공간을 갖고 싶을 것입니다.

여기에 내가 설정 한 내용이 있습니다. 의 오른쪽 파란색 사업부 뒤에 숨어있는 노란 사업부를 참조하십시오 http://jsfiddle.net/MVzHS/1/

#floatRight { 
    width: 100px; 
    height:200px; 
    background-color:blue; 
    position: absolute; 
    right:10px; 
    top:10px; 
}

솔루션 : http://jsfiddle.net/MVzHS/3/

출처

2013-02-13 gwin003

당신이 말하는 것은 정확히 무엇입니까? 를 위해 설계되었습니다 ... 그리고 일단 웹킷이 아닌 다른 브라우저가 있으면, 여러분은 설정 될 것입니다! http://caniuse.com/#feat=flexbox – PlantTheIdea

jfiddle에서 설정하는 중입니다. 업데이트가 끝나면 업데이트를 게시합니다. – gwin003

당신은 파란색 상자에 float: right을 사용하고 빨간색 상자에 overflow: hidden를 설정하여 그것을 할 수 있습니다.

예를 들어 jsFiddle을 확인하십시오.

출처

2013-02-13 22:04:20 dsundy

굉장! 나는 그것을 작동 시켰어. 감사!! – gwin003

HTML

<div id="parent"> 

    <div id="blue">Blue content here</div> 

    <div id="red">Red 1 content here 
    <br>more content 
    <br>more content 
    <br>more content 
    <br>more content 
    <br>more content</div> 

    <div id="red">Red 2 content</div> 
    <div id="red">Red 3 content</div> 

</div>

CSS

#parent 
{ 
    border: 1px solid black; 
    height: 100%; 
} 

#blue 
{ 
    float: right; 
    border: 1px solid blue; 
    height: 100px; 
    margin-left: 10px; 
} 

#red 
{ 
    border: 1px solid red; 
    overflow: hidden; 
    margin-bottom: 10px; 
}

JS 빈 여기에 해당 : http://jsbin.com/irubuy/5

출처

2013-02-13 22:07:35

소스에서 당신은 블루 DIV 첫째을 추가하고 오른쪽이 그것을 떠 경우 당신이 원하거나 필요로하는 것을해야합니까?

http://jsfiddle.net/seemly/BTxgJ/

유일한 "문제"

.black { 
    width:958px; 
    padding:10px; 
    border:1px solid #000; 
    float:left; 
} 
.blue { 
    width:248px; 
    height:400px; 
    border:1px solid #00f; 
    float:right; 
    margin:0 0 10px 30px; 
} 
.red { 
    border:1px solid #f00; 
    margin:0 0 10px; 
}

내가 제공 한 바이올린 발견은 div의 자신의 종류의 서로 교차하지만, 그 안에 내용들이 정상적으로 포장이다. 테두리, 배경색 또는 배경 이미지를 사용하는 경우 이것이 어떻게 표시되는지 확신 할 수 없습니다. 이 모든 도움이됩니까?

출처

2013-02-13 22:08:20 seemly

배경색이 영향을받지 않습니다. http://jsfiddle.net/MVzHS/3/ – gwin003

CSS - 다른 div 주위로 플로트 자식 div

답변

관련 문제