플로팅 div의 래핑 중지
브라우저가 너무 좁아서 맞지 않는 경우 줄 바꿈되지 않는 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>현재 저는 행의 너비를 정말 큰 숫자로 하드 코딩하고 있습니다.
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>
min-width행 을 정의 하여 브라우저의 크기가 조정될 때 그 아래로 이동하지 않고 줄 바꿈하지 않도록합니다.
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>
내가이 일을 관리했습니다 유일한 방법은 사용하는 것입니다 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>
나에게 (부트 스트랩 사용) 작동했던 것은 마지막 셀 에 설정 display:absolute;z-index:1하는 것뿐이었습니다 .
I had a somewhat similar problem where a bounded area consisted of an image in a float:left block and a non-float text block. The area has a fluid width. The text would, by design, wrap up along the right side of the image. The trouble was, the text began with an <h2> tag, the first word of which is the tiny word "From." As I resized the window to a smaller width, the non-floated text would, for a certain range of widths, leave only the word "From" at the top of the wrap area, the rest of the text having been squeezed below the float block. My solution was to make the first word of the tag bigger, by replacing the space that followed it with this code, <span style="opacity:0;">x</span> . The effect was to make the first word, instead of "From", "FromxNextWord", where the "x", being invisible, looked like a space. Now my first word was big enough not to be abandoned by the rest of the text block.
참고URL : https://stackoverflow.com/questions/5616360/stop-floating-divs-from-wrapping
'development' 카테고리의 다른 글
| WCF ChannelFactory와 프록시 생성 (0) | 2020.10.05 |
|---|---|
| not_nil에 Ruby 또는 Ruby-ism이 있습니까? (0) | 2020.10.05 |
| 좋은 경량 CSV 뷰어는 무엇입니까? (0) | 2020.10.05 |
| 프로그래밍 방식으로 참조를 추가하는 방법 (0) | 2020.10.05 |
| 자동 레이아웃을 사용하여 하위보기가 동적으로 변경된 후 superview 크기 조정 (0) | 2020.10.05 |