html - Stop floating divs from wrapping

Question

Welcome To Ask or Share your Answers For Others

html - Stop floating divs from wrapping

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Stop floating divs from wrapping

I want to have a row of divs (cells) that don't wrap if the browser is too narrow to fit them.

I've searched Stack, and couldn't find a working answer to what I think should be a simple css question.

The cells have specified width. However I don't want to specify the width of the row, the width should automatically be the width of its child cells.

If the viewport is too narrow to accomodate the rows, then the div should overflow with scrollbars.

Please provide your answer as working code snippet, as I've tried a lot of the solutions I've seen elsewhere (like specify width: 100% and they don't seem to work).

I'm looking for a HTML/CSS only solution, no 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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T01:38:27+0000

The CSS property display: inline-block was designed to address this need. You can read a bit about it here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Below is an example of its use. The key elements are that the row element has white-space: nowrap and the cell elements have display: inline-block. This example should work on most major browsers; a compatibility table is available here: 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>

Categories

html - Stop floating divs from wrapping

html - Stop floating divs from wrapping

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags