플로팅 div의 래핑 중지

84

브라우저가 너무 좁아서 맞지 않는 경우 줄 바꿈되지 않는 div (셀) 행을 갖고 싶습니다.

스택을 검색했지만 간단한 CSS 질문이어야한다고 생각하는 작업에 대한 답변을 찾을 수 없습니다.

셀에 지정된 너비가 있습니다. 그러나 행의 너비를 지정하고 싶지는 않지만 너비는 자동으로 자식 셀의 너비가되어야합니다.

뷰포트가 너무 좁아 행을 수용 할 수없는 경우 div가 스크롤바로 오버플로되어야합니다.

내가 다른 곳에서 본 많은 솔루션을 시도 했으므로 작동 코드 스 니펫으로 답변을 제공하십시오 (예 : 너비를 100 % 지정하고 작동하지 않는 것 같습니다).

JavaScript가 아닌 HTML / CSS 전용 솔루션을 찾고 있습니다.

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}
<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>
스 니펫 확장

현재 저는 실제로 행의 너비를 정말 큰 숫자로 하드 코딩하고 있습니다.

html  css-float  word-wrap 
— 니콜라스
소스
1
아래 답변 중 하나가 도움이 되었습니까? 나는 그들 중 어느 누구도 성공하지 못하고 있습니다.
— John Fitzpatrick 2012
나는 모든 대답을 시도했지만 아무도 나를 위해 일하지 않았습니다. 문제는 두 개의 부동 왼쪽 div를 중앙에 배치하고 창 크기가 조정 된 후 오른쪽에있는 div가 왼쪽 아래로 밀리지 않도록해야한다는 것입니다.
— Bashevis 2013
@Nicholas 내 예가 정확히 당신이 찾고있는 것이라고 생각합니다. 오늘도이 같은 문제를 발견했습니다. 드롭 다운 메뉴는 오버플로되지만 첫 번째 계층은 래핑되지 않습니다.
— John

답변:

107

CSS 속성 display: inline-block은 이러한 요구를 해결하기 위해 설계되었습니다. 여기에서 그것에 대해 조금 읽을 수 있습니다 : http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

다음은 그 사용의 예입니다. 핵심 요소는 row요소가 가지고 white-space: nowrap있고 cell요소가 가지고 있다는 것 display: inline-block입니다. 이 예제는 대부분의 주요 브라우저에서 작동합니다. 호환성 표는 http://caniuse.com/#feat=inline-block에서 확인할 수 있습니다.

<html>
<body>
<style>

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>


</body>
</html>
— 칼뱅
소스
1
<!DOCTYPE html>또는 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 상단에 추가 하여 IE가 쿼크 모드로 기본 설정되지 않도록합니다.
— Cees Timmerman 2013 년
4
참고 : 내 셀 유형 div를 float : left로 설정했고 이로 인해 계산 된 스타일이 인라인 블록이 아닌 블록이되었습니다. 알아내는 데 시간이 좀 걸렸으므로 공유하는 것이 가장 좋다고 생각했습니다.
— Steve Hibbert 2015
이것은 마지막 셀에서 작동하지 않습니다 float: right.
— Andy
3
이것은 플로팅 된 div가 래핑 되지 않도록하는 방법에 대한 실제 예가 아닙니다 . 왼쪽 및 오른쪽 플로트가있는 레이아웃이 있으므로 래핑 문제를 해결하기 위해 플로트를 제거 할 수 없습니다.
— Andy
하하, 충분히 공평하다. 그것은 현학적 인 구별이지만 당신이 옳습니다. 나는 "포장에서 떠 다니는 div 중지"를 해결하지 않았고, 질문자의 실제 질문 인 "내 레이아웃을 어떻게 작동하게 만드는가"를 해결했습니다 . 전자에 대한 대답 : 플로팅 된 div가 래핑되는 것을 방지 할 방법이 없다고 합리적으로 확신합니다. 질문자와 마찬가지로 설명하는 레이아웃을 인코딩하는 다른 방법을 찾아야합니다.
— Calvin
32

min-width행 에 정의 하여 브라우저의 크기가 조정될 때 그 아래로 이동하지 않고 래핑하지 않도록합니다.

— Farooq
소스
1
이것은 수레에서도 작동합니다. 그게 진짜 답이라고 생각합니다.
— Danon 2015 년
2
@Danon과 동의하십시오-이것은 작동하는 반면 인라인 블록은 수직 정렬 문제를 도입했습니다.
— dlchambers
1
귀하의 필요에 따라 다릅니다. 이렇게하면 페이지 크기가 조정될 때 플로팅 된 div가 래핑되지 않지만 질문자는 "행의 너비를 지정하고 싶지 않습니다. 너비는 자동으로 자식 셀의 너비가되어야합니다."라고 말했습니다. 수동 너비 지정에는 행의 총 너비를 계산해야하므로 일부 중복 작업이 필요합니다. 더 나쁜 것은 셀이 가변 너비 인 경우 (예 : 셀 내부의 텍스트 한 줄에 맞게 크기가 조정되어 있기 때문에) 합계를 계산하는 것이 비현실적이거나 불가능할 수 있다는 것입니다.
— Calvin
-1; 이것은 OP가 그의 질문에서 구체적으로 말한 것, 즉 너비를 지정할 필요가 없다는 것과 반대됩니다. 위의 Calvin의 의견에 +1.
— Teodor Sandu
4

John의 답변을 읽은 후 다음이 우리에게 효과적이라는 것을 발견했습니다 (너비 지정이 필요하지 않음).

<style>
.row {
    float:left;
    border: 1px solid yellow;
    overflow: visible;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
</div>
— 케빈 르블랑
소스
이것은 아이폰에서 드래그 가능한 div와 관련된 문제를 해결했습니다. div에 두 개 이상의 단어가 있고 화면 가장자리로 끌면 div가 줄 바꿈되어 어느 한 줄에 단어가 있습니다. 어쨌든 overflow: visible; white-space: nowrap;나를 위해 트릭을 했어. 감사!
— TryHarder 2015
4
그가 세포를 풀어 놓았 기 때문에 작동했습니다. 아니 정말 솔루션은 포장에서 div의 부동 실제로 유지
— 앤디
1

내가이 일을 관리했습니다 유일한 방법은 사용하는 것입니다 overflow: visible;및 width: 20000px;부모 요소에. 제가 알고있는 CSS 레벨 1로는이 작업을 수행 할 방법이 없습니다. 저는 CSS 레벨 3으로 모든 궁호를해야한다고 생각하지 않았습니다. 아래 예제에는 1920x1200 해상도 LCD를 넘어서는 18 개의 메뉴가 있습니다. , 화면이 더 큰 경우 첫 번째 계층 메뉴 요소를 복제하거나 브라우저 크기를 조정하십시오. 또는 약간 낮은 수준의 브라우저 호환성으로 CSS3 미디어 쿼리를 사용할 수 있습니다.

다음은 전체 복사 / 붙여 넣기 예제 데모입니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML5 Menu Demonstration</title>
<style type="text/css">
* {border: 0; box-sizing: content-box; color: #f0f; font-size: 10px; margin: 0; padding: 0; transition-property: background-color, background-image, border, box-shadow, color, float, opacity, text-align, text-shadow; transition-duration: 0.5s; white-space: nowrap;}
a:link {color: #79b; text-decoration: none;}
a:visited {color: #579;}
a:focus, a:hover {color: #fff; text-decoration: underline;}
body {background-color: #444; overflow-x: hidden;}
body > header {background-color: #000; height: 64px; left: 0; position: absolute; right: 0; z-index: 2;}
body > header > nav {height: 32px; margin-left: 16px;}
body > header > nav a {font-size: 24px;}
main {border-color: transparent; border-style: solid; border-width: 64px 0 0; bottom: 0px; left: 0; overflow-x: hidden !important; overflow-y: auto; position: absolute; right: 0; top: 0; z-index: 1;}
main > * > * {background-color: #000;}
main > section {float: left; margin-top: 16px; width: 100%;}
nav[id='menu'] {overflow: visible; width: 20000px;}
nav[id='menu'] > ul {height: 32px;}
nav[id='menu'] > ul > li {float: left; width: 140px;}
nav[id='menu'] > ul > li > ul {background-color: rgba(0, 0, 0, 0.8); display: none; margin-left: -50px; width: 240px;}
nav[id='menu'] a {display: block; height: 32px; line-height: 32px; text-align: center; white-space: nowrap;}
nav[id='menu'] > ul {float: left; list-style:none;}
nav[id='menu'] ul li:hover ul {display: block;}
p, p *, span, span * {color: #fff;}
p {font-size: 20px; margin: 0 14px 0 14px; padding-bottom: 14px; text-indent: 1.5em;}
.hidden {display: none;}
.width_100 {width: 100%;}
</style>
</head>

<body>

<main>
<section style="height: 2000px;"><p>Hover the first menu at the top-left.</p></section>
</main>

<header>
<nav id="location"><a href="">Example</a><span> - </span><a href="">Blog</a><span> - </span><a href="">Browser Market Share</a></nav>
<nav id="menu">
<ul>
<li><a href="" tabindex="2">Menu 1 - Hover</a>
<ul>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
</ul>
</li>
<li><a href="" tabindex="2">Menu 2</a></li>
<li><a href="" tabindex="2">Menu 3</a></li>
<li><a href="" tabindex="2">Menu 4</a></li>
<li><a href="" tabindex="2">Menu 5</a></li>
<li><a href="" tabindex="2">Menu 6</a></li>
<li><a href="" tabindex="2">Menu 7</a></li>
<li><a href="" tabindex="2">Menu 8</a></li>
<li><a href="" tabindex="2">Menu 9</a></li>
<li><a href="" tabindex="2">Menu 10</a></li>
<li><a href="" tabindex="2">Menu 11</a></li>
<li><a href="" tabindex="2">Menu 12</a></li>
<li><a href="" tabindex="2">Menu 13</a></li>
<li><a href="" tabindex="2">Menu 14</a></li>
<li><a href="" tabindex="2">Menu 15</a></li>
<li><a href="" tabindex="2">Menu 16</a></li>
<li><a href="" tabindex="2">Menu 17</a></li>
<li><a href="" tabindex="2">Menu 18</a></li>
</ul>
</nav>
</header>

</body>
</html>
— 남자
소스
내가 upvoted 대답을 사용하고 교체 할 때 width:100%와 width:1000px그것은 나를 위해 작동
— Nick.McDermaid
@ Nick.McDermaid 나는 이유 때문에 20K 픽셀을 사용했는데 4K 화면이 나오면 결국 8K가 될 것이라는 것을 알고 있으므로 화면이 더 높아질 때까지 그 여분의 해 동안 계속 작동하도록 엄청나게 높은 숫자로 작업하는 것이 가장 좋습니다. -삶 자체보다 해상도. ;-)
— John
알겠습니다 ... 포장을 그만 둘 수있어서 기쁩니다. CSS- 그것은 F12 도구로도 나를 미치게 만듭니다. 나는 아무도 그들 없이는 어떤 일을했는지 ​​모르겠다.
— Nick.McDermaid 2015 년
1
향후 참조 : 브라우저가 여전히 불필요한 큰 상자를 메모리에 저장하기 때문에 거대한 너비 / 높이를 사용하는 것은 매우 비효율적입니다. 에 컨테이너 설정 white-space: nowrap;과 아이들 display: inline-block;이미 다른 답변에서 말했듯을 (또는 다시 가을 display: table;과 display: table-cell;).
— gyo
main > * > * {background-color: #000;}O_o
— theflowersoftime 2016
0

나에게 (부트 스트랩 사용) 작동했던 것은 마지막 셀 에 설정 display:absolute;z-index:1하는 것뿐이었습니다 .

— Spikolynn
소스
1
display:absolute유효한 CSS가 아닙니다
— caiosm1005
-1

경계 영역이 float : left 블록과 비-부동 텍스트 블록의 이미지로 구성된 다소 비슷한 문제가있었습니다. 이 영역에는 유동적 인 너비가 있습니다. 텍스트는 디자인 상 이미지의 오른쪽을 따라 마무리됩니다. 문제는 텍스트가 <h2> 태그로 시작되었고 그 첫 번째 단어는 "From"이라는 작은 단어였습니다. 창 크기를 더 작게 조정하면 부동하지 않은 텍스트는 특정 너비 범위에 대해 줄 바꿈 영역의 맨 위에 "From"이라는 단어 만 남겨두고 나머지 텍스트는 부동 소수점 아래에 압착되었습니다. 블록. 내 해결책은 태그의 첫 번째 단어를 더 크게 만드는 것이 었습니다. 그 뒤에 오는 공백을이 코드 <span style = "opacity : 0;"> x </ span>로 대체했습니다. 그 효과는 "From", "FromxNextWord"대신 첫 번째 단어를 만드는 것이 었습니다. 보이지 않는 "x"는 공간처럼 보였습니다. 이제 내 첫 번째 단어는 나머지 텍스트 블록에서 버려지지 않을만큼 충분히 컸습니다.

— 짐
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.