Vraag Stop zwevende divs van inpakken


Ik wil een rij divs (cellen) hebben die niet inpakken als de browser te smal is om er in te passen.

Ik heb Stack doorzocht en kon geen goed antwoord vinden op wat ik denk dat een eenvoudige css-vraag zou moeten zijn.

De cellen hebben een gespecificeerde breedte. Ik wil echter niet de breedte van de rij opgeven, maar de breedte moet automatisch de breedte van de onderliggende cellen zijn.

Als de viewport te smal is om de rijen te kunnen bevatten, moet de div overlopen met schuifbalken.

Geef uw antwoord op als werkende codefragment, omdat ik veel oplossingen heb geprobeerd die ik elders heb gezien (zoals breedte opgeven: 100% en ze lijken niet te werken).

Ik ben op zoek naar een HTML / CSS enige oplossing, geen 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>

Op dit moment ben ik eigenlijk hard aan het coderen van de breedte van de rij tot een heel groot getal.


75
2018-04-11 02:56


oorsprong


antwoorden:


De CSS-eigenschap display: inline-block is ontworpen om aan deze behoefte tegemoet te komen. Je kunt hier een beetje over lezen: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Hieronder is een voorbeeld van het gebruik ervan. De belangrijkste elementen zijn dat het row element heeft white-space: nowrap en de cell elementen hebben display: inline-block. Dit voorbeeld zou moeten werken op de meeste grote browsers; een compatibiliteitstabel is hier beschikbaar: 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



U wilt definiëren min-width op rij, dus wanneer de grootte van de browser wordt aangepast, gaat deze niet verder dan die in de rij.


28
2017-07-09 22:29



Na het lezen van het antwoord van John, ontdekte ik dat het volgende voor ons leek te werken (hoefde geen breedte te specificeren):

<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



De enige manier waarop dit is gelukt, is door het te gebruiken overflow: visible; en width: 20000px; op het bovenliggende element. Er is geen manier om dit te doen met CSS level 1 waarvan ik me bewust ben en ik weigerde te denken dat ik alle gung-ho met CSS level 3 zou moeten doen. Het onderstaande voorbeeld heeft 18 menu's die verder gaan dan mijn 1920x1200 resolutie LCD , als uw scherm groter is, dupliceert u gewoon de eerste niveau-menu-elementen of past u de grootte van de browser aan. Als alternatief en met enigszins lagere niveaus van browsercompatibiliteit kunt u CSS3-mediaquery's gebruiken.

Hier is een voorbeeld van een volledige exemplaar / plakken-voorbeeld ...

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



Voor mij (bootstrap gebruiken), was het enige dat aan de gang was display:absolute;z-index:1 op de laatste cel.


0
2018-02-01 19:24



Ik had een enigszins vergelijkbaar probleem waarbij een begrensd gebied bestond uit een afbeelding in een float: linkerblok en een niet-zwevend tekstblok. Het gebied heeft een vloeiende breedte. De tekst zou bij het ontwerp langs de rechterkant van de afbeelding worden ingepakt. Het probleem was dat de tekst begon met een <h2> -tag, waarvan het eerste woord het kleine woord 'Van' is. Toen ik het venster verkleinde naar een kleinere breedte, liet de niet-zwevende tekst voor een bepaald bereik van breedten alleen het woord 'Van' achter in het omslaggebied, terwijl de rest van de tekst onder de vlotter was geperst blok. Mijn oplossing was om het eerste woord van de tag groter te maken door de spatie die daarop volgde te vervangen door <span style = "opacity: 0;"> x </ span>. Het effect was om het eerste woord te maken, in plaats van "From", "FromxNextWord", waarbij de "x", onzichtbaar, een ruimte leek. Nu was mijn eerste woord groot genoeg om niet te worden verlaten door de rest van het tekstblok.


-1
2018-05-11 00:06