หยุดการตัด Divs แบบลอยตัว

Question 1

ฉันต้องการมีแถวของ div (เซลล์) ที่ไม่พันกันหากเบราว์เซอร์แคบเกินไป

ฉันได้ค้นหา Stack แล้ว แต่ไม่พบคำตอบที่ใช้ได้สำหรับสิ่งที่ฉันคิดว่าควรเป็นคำถาม css ธรรมดา ๆ

เซลล์มีการระบุความกว้าง อย่างไรก็ตามฉันไม่ต้องการระบุความกว้างของแถวความกว้างควรเป็นความกว้างของเซลล์ลูกโดยอัตโนมัติ

หากวิวพอร์ตแคบเกินไปที่จะรองรับแถว div ควรล้นด้วยแถบเลื่อน

โปรดให้คำตอบของคุณเป็นข้อมูลโค้ดที่ใช้งานได้เนื่องจากฉันได้ลองใช้วิธีแก้ปัญหามากมายที่ฉันเคยเห็นจากที่อื่น (เช่นระบุความกว้าง: 100% และดูเหมือนจะไม่ได้ผล)

ฉันกำลังมองหาโซลูชัน HTML / CSS เท่านั้นไม่มี 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>

ขยายข้อมูลโค้ด

ในขณะนี้ฉันยากที่จะเข้ารหัสความกว้างของแถวเป็นตัวเลขที่ใหญ่มาก

Question 2

คุณสมบัติ 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>

Question 3

คุณต้องการกำหนดmin-widthในแถวดังนั้นเมื่อเบราว์เซอร์ปรับขนาดใหม่มันจะไม่อยู่ต่ำกว่านั้นและตัด

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

Question 5

วิธีเดียวที่ฉันสามารถทำได้คือการใช้overflow: visible;และwidth: 20000px;ในองค์ประกอบหลัก ไม่มีวิธีใดที่จะทำสิ่งนี้กับ CSS ระดับ 1 ที่ฉันรู้และฉันปฏิเสธที่จะคิดว่าฉันต้องใช้ CSS ระดับ 3 ทั้งหมดตัวอย่างด้านล่างมี 18 เมนูที่ขยายเกิน LCD ความละเอียด 1920x1200 ของฉัน หากหน้าจอของคุณมีขนาดใหญ่ขึ้นให้ทำซ้ำองค์ประกอบเมนูระดับแรกหรือปรับขนาดเบราว์เซอร์ อีกทางเลือกหนึ่งและด้วยระดับความเข้ากันได้ของเบราว์เซอร์ที่ต่ำกว่าเล็กน้อยคุณสามารถใช้แบบสอบถามสื่อ 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>

Question 6

สำหรับฉัน (ใช้ bootstrap) สิ่งเดียวที่ใช้ได้คือการตั้งค่าdisplay:absolute;z-index:1ในเซลล์สุดท้าย

Question 7

ฉันมีปัญหาที่ค่อนข้างคล้ายกันซึ่งพื้นที่ที่มีขอบเขตประกอบด้วยรูปภาพในโฟลต: บล็อกด้านซ้ายและบล็อกข้อความที่ไม่ลอย พื้นที่มีความกว้างของไหล โดยการออกแบบข้อความจะรวมอยู่ทางด้านขวาของรูปภาพ ปัญหาคือข้อความเริ่มต้นด้วยแท็ก <h2> ซึ่งคำแรกคือคำเล็ก ๆ "From" ในขณะที่ฉันปรับขนาดหน้าต่างให้มีความกว้างเล็กลงข้อความที่ไม่ลอยในช่วงความกว้างบางช่วงจะเหลือเพียงคำว่า "จาก" ที่ด้านบนของพื้นที่ตัดส่วนข้อความที่เหลือจะถูกบีบให้อยู่ด้านล่างลอย บล็อก. วิธีแก้ปัญหาของฉันคือทำให้คำแรกของแท็กใหญ่ขึ้นโดยแทนที่ช่องว่างที่ตามหลังด้วยโค้ดนี้ <span style = "opacity: 0;"> x </span> เอฟเฟกต์คือการสร้างคำแรกแทนที่จะเป็น "From", "FromxNextWord", โดยที่ตัว "x" มองไม่เห็นดูเหมือนช่องว่าง ตอนนี้คำแรกของฉันใหญ่พอที่จะไม่ละทิ้งจากบล็อกข้อความที่เหลือ