Pertanyaan Hentikan div mengambang dari pembungkus


Saya ingin memiliki deretan divs (sel) yang tidak membungkus jika browser terlalu sempit untuk menyesuaikannya.

Saya telah mencari Stack, dan tidak dapat menemukan jawaban yang tepat untuk apa yang saya pikir harus menjadi pertanyaan css sederhana.

Sel-sel memiliki lebar yang ditentukan. Namun saya tidak ingin menentukan lebar baris, lebar seharusnya secara otomatis menjadi lebar sel turunannya.

Jika viewport terlalu sempit untuk mengakomodasi baris, maka div akan melimpah dengan scrollbars.

Harap berikan jawaban Anda sebagai cuplikan kode kerja, karena saya sudah mencoba banyak solusi yang pernah saya lihat di tempat lain (seperti menentukan lebar: 100% dan sepertinya tidak berfungsi).

Saya mencari solusi HTML / CSS saja, tidak ada 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>

Saat ini saya benar-benar sulit mengkodekan lebar baris ke angka yang sangat besar.


75
2018-04-11 02:56


asal


Jawaban:


Properti CSS display: inline-block dirancang untuk memenuhi kebutuhan ini. Anda dapat membaca sedikit tentang ini di sini: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Di bawah ini adalah contoh penggunaannya. Elemen utamanya adalah bahwa row elemen memiliki white-space: nowrap dan cell elemen miliki display: inline-block. Contoh ini harus berfungsi di sebagian besar browser utama; tabel kompatibilitas tersedia di sini: 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>

99
2018-06-13 01:11



Anda ingin mendefinisikan min-width pada baris sehingga ketika browser berukuran ulang tidak pergi di bawah itu dan membungkus.


28
2017-07-09 22:29



Setelah membaca jawaban John, saya menemukan bahwa hal-hal berikut tampaknya berhasil untuk kami (tidak perlu menentukan lebar):

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

3
2017-10-31 14:58



Satu-satunya cara saya berhasil melakukannya adalah dengan menggunakan overflow: visible; dan width: 20000px; pada elemen induk. Tidak ada cara untuk melakukan ini dengan CSS level 1 yang saya sadari dan saya menolak untuk berpikir saya harus pergi semua gung-ho dengan CSS level 3. Contoh di bawah ini memiliki 18 menu yang melampaui resolusi LCD 1920x1200 saya , jika layar Anda lebih besar hanya menduplikasi elemen menu tier pertama atau hanya mengubah ukuran browser. Alternatif lain dan dengan tingkat kompatibilitas browser yang sedikit lebih rendah, Anda dapat menggunakan kueri media CSS3.

Berikut ini contoh demo salin lengkap / tempel ...

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

0
2017-09-20 17:55



Bagi saya (menggunakan bootstrap), hanya hal yang berhasil adalah pengaturan display:absolute;z-index:1 pada terakhir sel.


0
2018-02-01 19:24



Saya memiliki masalah yang agak mirip di mana area yang dibatasi terdiri dari gambar di float: blok kiri dan blok teks non-float. Area ini memiliki lebar cairan. Teks akan, dengan desain, membungkus sepanjang sisi kanan gambar. Masalahnya adalah, teks dimulai dengan tag <h2>, kata pertama yang merupakan kata kecil "Dari." Ketika saya mengubah ukuran jendela ke lebar yang lebih kecil, teks yang tidak mengapung akan, untuk rentang lebar tertentu, hanya menyisakan kata "Dari" di bagian atas area bungkus, sisa teks yang telah diperas di bawah float blok. Solusi saya adalah membuat kata pertama dari tag lebih besar, dengan mengganti ruang yang mengikutinya dengan kode ini, <span style = "opacity: 0;"> x </ span>. Efeknya adalah membuat kata pertama, alih-alih "Dari", "FromxNextWord", di mana "x", menjadi tidak terlihat, tampak seperti ruang. Sekarang kata pertama saya cukup besar untuk tidak ditinggalkan oleh sisa blok teks.


-1
2018-05-11 00:06