Dừng các div nổi khỏi gói

Question 1

Tôi muốn có một hàng div (ô) không bao bọc nếu trình duyệt quá hẹp để phù hợp với chúng.

Tôi đã tìm kiếm Stack và không thể tìm thấy câu trả lời phù hợp cho những gì tôi nghĩ phải là một câu hỏi css đơn giản.

Các ô có chiều rộng được chỉ định. Tuy nhiên, tôi không muốn chỉ định chiều rộng của hàng, chiều rộng sẽ tự động là chiều rộng của các ô con của nó.

Nếu chế độ xem quá hẹp để chứa các hàng, thì div sẽ tràn các thanh cuộn.

Vui lòng cung cấp câu trả lời của bạn dưới dạng đoạn mã đang hoạt động, vì tôi đã thử rất nhiều giải pháp mà tôi đã thấy ở những nơi khác (như chỉ định chiều rộng: 100% và chúng dường như không hoạt động).

Tôi đang tìm kiếm một giải pháp chỉ HTML / CSS, không có JavaScript.

.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>

Mở rộng đoạn mã

Hiện tại, tôi thực sự khó mã hóa chiều rộng của hàng thành một con số thực sự lớn.

Question 2

Thuộc tính CSS display: inline-blockđược thiết kế để giải quyết nhu cầu này. Bạn có thể đọc một chút về nó tại đây: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Dưới đây là một ví dụ về việc sử dụng nó. Các yếu tố quan trọng là rowyếu tố có white-space: nowrapvà các cellyếu tố có display: inline-block. Ví dụ này sẽ hoạt động trên hầu hết các trình duyệt chính; bảng tương thích có sẵn tại đây: 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>

Question 3

Bạn muốn xác định min-widthtrên hàng để khi trình duyệt được định lại kích thước, nó không nằm dưới hàng đó và quấn.

Question 4

Sau khi đọc câu trả lời của John, tôi phát hiện ra rằng những điều sau dường như phù hợp với chúng tôi (không yêu cầu chỉ định chiều rộng):

<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>

Question 5

Cách duy nhất tôi quản lý để làm điều này là sử dụng overflow: visible;và width: 20000px;trên phần tử mẹ. Không có cách nào để làm điều này với CSS cấp độ 1 mà tôi biết và tôi đã từ chối nghĩ rằng mình sẽ phải làm tất cả những điều này với CSS cấp độ 3. Ví dụ dưới đây có 18 menu mở rộng ngoài màn hình LCD độ phân giải 1920x1200 của tôi , nếu màn hình của bạn lớn hơn, chỉ cần sao chép các phần tử menu tầng đầu tiên hoặc chỉ thay đổi kích thước trình duyệt. Ngoài ra, với mức độ tương thích của trình duyệt thấp hơn một chút, bạn có thể sử dụng các truy vấn phương tiện CSS3.

Đây là một ví dụ minh họa đầy đủ về sao chép / dán ...

<?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>

Question 6

Đối với tôi (sử dụng bootstrap), điều duy nhất hoạt động là thiết lập display:absolute;z-index:1trên ô cuối cùng .

Question 7

Tôi đã gặp sự cố hơi tương tự trong đó một vùng giới hạn bao gồm một hình ảnh trong khối float: left và khối văn bản không float. Khu vực có chiều rộng chất lỏng. Theo thiết kế, văn bản sẽ bao bọc dọc theo bên phải của hình ảnh. Rắc rối là, văn bản bắt đầu bằng thẻ <h2>, từ đầu tiên trong số đó là từ nhỏ "Từ". Khi tôi thay đổi kích thước cửa sổ thành chiều rộng nhỏ hơn, văn bản không trôi nổi, đối với một phạm vi chiều rộng nhất định, chỉ để lại từ "Từ" ở đầu vùng bọc, phần còn lại của văn bản đã được ép bên dưới dấu nổi khối. Giải pháp của tôi là làm cho từ đầu tiên của thẻ lớn hơn, bằng cách thay thế khoảng trắng theo sau nó bằng mã này, <span style = "opacity: 0;"> x </span>. Hiệu quả là tạo ra từ đầu tiên, thay vì "Từ", "TừxNextWord", trong đó "x", không thể nhìn thấy, trông giống như một khoảng trắng. Bây giờ từ đầu tiên của tôi đủ lớn để không bị phần còn lại của khối văn bản bỏ rơi.