Question

I have a case of three inline divs that should be displayed either inline or in column if they don't fit in their container. However, if container is not wide enough for them to fit inline while being not narrow enough for them to collapse into a single column, they are displayed like 2+1 (two inline on top of one).

How to force them to display either ALL inline, or ALL in one column, provided:

I want to avoid using media query.
Inner divs have fixed width in px.

CSS:

.container {
    text-align: center;
    background-color: #FFFFFF;
    margin-bottom: 20px;
}

.narrow {
    width: 200px;
}

.medium {
    width: 400px;
}

.wide {
    width: 600px;
}

.element {
    width: 100px;
    margin: 20px;
    padding: 20px;
    display: inline-block;
    background-color: #FF0000;
    border-radius: 5px;
}

HTML:

<div class="container narrow">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container medium">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container wide">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

JS Fiddle: https://jsfiddle.net/5wLeggy4/1/

Answer 1

The only way to do it without using media queries is using flexbox:

https://jsfiddle.net/5wLeggy4/3/

.container {
    text-align: center;
    background-color: #FFFFFF;
    margin-bottom: 20px;
    display: flex;
}

.narrow {
    width: 200px;
    flex-direction: column;
}

.medium {
    width: 400px;
    flex-direction: column;
}

.wide {
    width: 600px;
}

.element {
    width: 100px;
    margin: 20px;
    padding: 20px;
    background-color: #FF0000;
    border-radius: 5px;
    flex-direction: row;
}

<div class="container narrow">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container medium">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

<div class="container wide">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Answer 2

Try using "display : block;" instead of "display:inline-block;".

https://jsfiddle.net/AnjuRaj/5wLeggy4/2/

So your element class should look like:

.element {
    width: 100px;
    margin: 20px;
    padding: 20px;
    display: block;
    background-color: #FF0000;
    border-radius: 5px;

}

Answer 3

关于我能想出的最好的结果：https://jsfiddle.net/5wLeggy4/5/

<div class="container wide">
    <div class="one">
      <div class="element"></div>
    </div>    
    <div class="two">
      <div class="element"></div>
      <div class="element"></div>
    </div>
</div>
<style>
.container {
    text-align: center;
    background-color: #FFFFFF;
    margin-bottom: 20px;
}


.one {
  display:inline-block;
}
.two {
  width:67%;
  max-width:364px;
display:inline-block;
  }

.element {
    width: 100px;
    margin:20px;  
    padding: 20px;  
    display: inline-block;
    background-color: #FF0000;
    border-radius: 5px;
}
</style>

.two上的width属性导致后两个元素一起下拉。 .two div的最大宽度意味着它们也无法扩展。

令人讨厌的是，由于两个规则的重叠，屏幕有一个像素宽度，它们可以在一起。如果.two完全是364px，那么内部的两个元素将显示为内联。

Three inline divs: how to make display all three inline OR three block (NOT 2 + 1)?

3 个答案: