wrapping없이`float : left`하는 법?

특정 너비 (내용에 따라 다를 수 있음)가있는 box1 컨테이너가 있습니다. 이 상자에는 너비가 고정 된 box2이 포함되어 있습니다 (아이콘 일 수 있음). box2 옆에 일부 텍스트가 box3 있습니다. 나는이 텍스트가 box2의 오른쪽에있는 모든 공간을 사용하기를 원합니다. HTML 아래에 붙여, 당신은 얻을 :wrapping없이`float : left`하는 법?

Short text

를 지금까지 너무 좋아. 텍스트가 길어지면 box2 (이게 내가 원하는 것입니다.)을 감싸지 않습니다. 그러나 box1이 내 문제입니다. "이봐, box3을 position: absolute으로 만들었다면, 어떻게하면 box1가 자랄 수있을 것이라고 기대할 수 있겠는가?" 글쎄, 그렇다면 어떻게해야합니까? box3을 box2 옆에 표시하고, 사용 가능한 모든 가로 공간을 사용하고, 필요한 경우 box1을 증가시킬 수 있습니까?

Long text

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      #box1 { position: relative } 
      #box3 { position: absolute; left: 2.5em; right: .5em; top: .5em } 

      /* Styling */ 
      #box1 { background: #ddd; padding: 1em 0.5em; width: 20em } 
      #box2 { background: #999; padding: .5em; } 
      #box3 { background: #bbb; padding: .5em; } 
      body { font-family: sans-serif } 
     </style> 
     <script type="text/javascript"> 
     </script> 
    </head> 
    <body> 
     <div id="box1"> 
      <span id="box2">2</span> 
      <span id="box3">3</span> 
     </div> 
    </body> 
</html>

출처

2011-04-19 avernet

두 번째 그림처럼 보일 :

더 일반적인, 현대 솔루션은 ::after 의사 요소를 사용하고과 같이 그 취소하는 것입니다 대신 box1이 아래쪽으로 확장되어 box2와 box3을 묶으시겠습니까? – DaveGauer

당신은 블록 레벨 요소로 상자 3 필요 (? 난 이후 IE6에이 일을하고 싶습니다, 그리고 테이블을 사용하지 않는 말을해야합니까), 그래서 사용 display:block 한 다음 float 상자 2 -ing와 함께에 overflow:hidden에 던져 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      #box1 { } 
      #box2 { float:left; } 
      #box3 { display:block;overflow:hidden; } 

      /* Styling */ 
      #box1 { background: #ddd; padding: 1em 0.5em; width: 20em } 
      #box2 { background: #999; padding: .5em; } 
      #box3 { background: #bbb; padding: .5em; } 
      body { font-family: sans-serif } 

     </style> 
     <script type="text/javascript"> 
     </script> 
     <title>How to do a `float: left` with no wrapping?</title> 
    </head> 
    <body> 
     <div id="box1"> 
      <span id="box2">2</span> 
      <span id="box3">3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br /></span> 
     </div> 
    </body> 
</html>

놀라운 모든 것을 overflow:hidden 할 수 있습니다 : D

출처

2011-04-19 00:57:47

위대한 작품, 고마워요! 이 솔루션에 대한 자세한 내용은 여기에 문서화되어 있습니다. (왜'overflow : hidden '이 그 효과를 갖는지 알고 싶었습니다) 그리고 거기에 또 다른 해결책을 제시했습니다. 여기에는'margin-left'를 사용합니다 : http : //wiki.orbeon .com/forms/doc/contributor-guide/browser # TOC-a-box-from-below-below- – avernet

@ avernet의 링크는 관련 섹션을 가리 키지 않습니다. 올바른 링크는 다음과 같습니다. http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Prevent-a-box-from-extending-below-float –

'overflow : hidden' 실제로 작동합니다. 이 경우를 포함하여 많은 경우에 그렇습니다. 하지만 @ hesselbom의 답변에 언급 된 클리어 픽스 (clearfix)가보다 일관되게 작동하는 솔루션입니다. 12 열 레이아웃에 국한된 것이 아니라 매우 유연한 본격적인 그리드 솔루션은 http://csswizardry.com/2013/02/responsive-grid-systems-a-solution/을 참조하십시오. http://purecss.io/ 및 http://materializecss.com/ 프레임 워크를 참조하십시오. –

-3

나는 다음과 같은 것을 권 해드립니다 : #box2는 고정 된 크기 인 경우

이

#box1 
{ 
    position: relative; /* or some other positioned value */ 
} 

#box2 
{ 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#box3 
{ 
    margin-left: 10px; 
}

, 당신은 단순히 #box2 자사의 중복을 방지하기 위해 #box3에 대한 마진을 사용할 수 있습니다, 그리고이 위치하지 이후, #box1는 #box3로 성장할 것입니다 자랍니다.

출처

2011-04-19 00:59:50 Jacob

차임 시간을내어 주셔서 감사합니다. 그러나 이것은 나를 위해 작동하지 않습니다. http://goo.gl/dNWp4에서 제안하는 스타일이 적용된 HTML이 있습니다. @ Richard의 제안 (http://goo.gl/3H96P)은 저에게 효과적이므로 특히 관심이 없으면 걱정할 필요가 없습니다. – avernet

아, 나는 그들이 span이 아니라 divs 인 것을 놓쳤습니다. 그것들에'display : block'이 사용 되었다면 더 잘 작동 할 것입니다. – Jacob

필자는'display : block'을 사용하여 작동하도록했습니다. 상자 2에서는'position : absolute'와 상자 3에서'margin-left'의 조합을 사용하므로 상자 2와 겹치지 않습니다. 상자 2에'float : left'를 사용하는 것과 매우 비슷한 솔루션을 찾았습니다. 'position : absolute'. 이 섹션의 "솔루션 2"를 참조하십시오. http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Prevent-a-box-from-extending-below- – avernet

이렇게하려면 몇 가지 방법이 있습니다. 두 가지 일반적인 것들 중 하나가 (단지 데모 인라인 CSS를) 그래서 같은 clear: both과 직후에 빈 요소를 가지고있다 :

<span class="box1">...</span> 
<br style="clear:both"/>

또 다른 방법은 overflow: hidden과 같이 사용하는 것입니다

<span class="box1" style="overflow: hidden">...</span>

그러나, 두 솔루션 모두에 문제가 있습니다. 첫 번째로 불필요하고 추악한 마크 업을 추가합니다. 그리고 상자의 바깥에 뭔가를두기를 원하는 경우 (예 : position: absolute) 두 번째로는 보이지 않습니다. 그냥 그래서, 당신은 결과를 명확하지 않으있어

.box1::after { 
    content: ''; 
    display: table; 
    clear: both; 
}

출처

2013-12-03 09:47:43 hesselbom

답변

관련 문제