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