다른 요소를 조정하지 않도록 div를 강제 배치

Question

이것은 어려운 질문입니다. 실용적인 데모가 순서대로 있다고 생각합니다.

나는 HTML 요소의 컬렉션을 가지고 :

div.select-div { 
    background-color: white; 
    border: 1px solid #CCC; 
    vertical-align: middle; 
    margin-bottom: 10px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    height: 20px; 
    padding: 4px 6px; 
} 

div.content-div { 
    float: left; 
    overflow: hidden; 
    background-color: white; 
    vertical-align: middle; 
    font-size: 14px; 
    color: #555; 
    height: 20px; 
    width: auto; 
} 

span.select-button { 
    cursor: pointer; 
    display: inline-block; 
    float: right; 
    width: 16px; 
    height: 16px; 
    margin-top: 2px; 
    position: relative; 
    background-color: red; // for testing simplicity, this would be a bg image 
} 

span.clear-button { 
    cursor: pointer; 
    display: inline-block; 
    float: right; 
    width: 16px; 
    height: 16px; 
    margin-top: 2px; 
    position: relative; 
    background-color: black; // for testing simplicity, this would be a bg image 
} 

텍스트 콘텐츠 사업부에 추가하고, 텍스트 등의 작은 금액에 대해 잘 작동이 CSS를 사용

<div class="outer-div">     // Container 
    <div class="content-div"></div>  // Text goes into this element 
    <span class="clear-button"></span>  // BG image for this is a 16x16 icon 
    <span class="select-button"></span> // BG image for this is a 16x16 icon 
</div> 

:

하지만 당신은 더 많은 텍스트를 추가하는 경우,이 일 :

는 내가 자신의 위치에서 이동하는 아이콘을 중지 할 수있는 방법을 찾기 위해 노력하고 내 머리를 찢어 봤는데,하지만 난 그것을 해결하지 못할. 이상적으로 div를 세로로 확장하고 싶지만 오버플로 텍스트를 그냥 숨기면 괜찮을 것입니다. 외부 div 너비가 다를 수 있습니다.

Answer 1

콘텐츠 div의 너비를 제한 한 다음 아이콘의 절대 위치 지정을 사용할 수 있습니다. 이것이 하나의 방법이지만 상황을 설명하기 위해 콘텐츠 div의 특정 너비를 정의하거나 컨테이너 내부의 수레를 지우지는 않습니다. 그것이 사물이 파괴되는 이유입니다. 다음과 같이 시도 할 수 있습니다.

div.select-div { 
    background-color: white; 
    border: 1px solid #CCC; 
    vertical-align: middle; 
    margin-bottom: 10px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    height: 20px; 
    width:200px; 
    padding: 4px 6px; 
    position:relative; 
} 

div.content-div { 
    background-color: white; 
    vertical-align: middle; 
    font-size: 14px; 
    color: #555; 
    height: 20px; 
    width: 160px; 
} 

span.select-button { 
    cursor: pointer; 
    display: inline-block; 
    position:absolute; 
    top:2px; 
    right:38px; 
    width: 16px; 
    height: 16px; 
    background-color: red; // for testing simplicity, this would be a bg image 
} 

span.clear-button { 
    cursor: pointer; 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    position:absolute; 
    top:2px; 
    right:18px; 
    background-color: black; // for testing simplicity, this would be a bg image 
} 

이렇게하면 컨테이너가 내용에 맞게 세로로 확장되어야합니다. 그럴 필요가 없다면 내부 내용의 높이를 제한하고 숨겨진 오버플로를 제한 할 수 있습니다.

Answer 2

당신이 두 개의 스팬 요소에 대한 외부 사업부에 대한

position:relative 

및

position:absolute ; 
top:0; 
right:0; 
display: block; 

사용하는 경우?

또는 인라인 :

<div class="outer-div" style="position: relative; background: #000000; height: 400px;"> 
    <div class="content-div" position: absolute; top: 0; left: 0; display: block; width: 200px; height: 30px;"> 
    <span class="clear-button" style="position: absolute; top: 0; right: 0; display: block; background: yourimage.png; width: 30px; height: 30px;"></span> 
    <span class="select-button" style="position: absolute; top: 0; right: 0; display: block; background: yourimage.png; width: 30px; height: 30px;"></span> 
</div> 

사용 오버 플로우 : 숨겨진; 텍스트가 넘치지 않도록