Question

我想要内联块的行为，并在响应容器（％宽度）中浮动几个div，其中：

浮动效果：

1a上。它会有div左右对齐

1b中。当窗口宽度缩小时 - 左右div之间的空间也会缩小
内联块效应：

2a上。所有的div都在同一行

2B。当窗口宽度缩小时 - 它将隐藏div（通常从右侧开始）

示例：

当窗口大于div时：
当窗口小于div时：

2a上。想要的效果

2B。错误的效果

这是我到目前为止所得到的代码示例（仅模拟浮动效果（1）和效果在同一行（2b）但在缩小窗口宽度（3b）时缺少效果），{{3 }}：

Bundle bundle = this.getArguments();
String val = bundle.getString("someValue", "");

.item1 {background-color: red;}
.item2 {background-color: yellow;}
.item3 {background-color: blue;}

#container {
  width: 95%;
  height: 50px; /* not sure if is needed */
}

#container div {
  display: inline-block; /* does nothing with floats */
  width:100px;
  height: 50px;
}

.left {float: left;}
.right {float: right;}

注意：

容器的值为％（有点响应）。
div（项目）的宽度应该具有固定的宽度（具有徽标图像，菜单和一些图标（更多图像），...）
在示例中，我还添加了内联块，以表明它不适用于它
该示例仅使用3个div（1个左侧和2个右侧），但如果可能的话，我更喜欢一个解决方案，我可以在不改变太多代码的情况下获得更多。（我想避免固定位置（如右：20px或20％）以便更容易添加新项目。）
应该只使用html和css（或html5和css3）找到解决方案（避免使用JavaScript）。

Answer 1

你应该看一下bootstraps网格系统。这会节省你很多时间。 http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Answer 2

可能不完全是你想要的，但它接近了：

对容器使用flex，并隐藏第二行。

并使用flex-shrink，flex-basis，max-width和margin

＆＃13;

.container {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    height: 100px;
    margin-bottom: -100px;
    border: solid 1px red;
    overflow: hidden;
}
.container div {
    height: 100px;
    border: solid 1px;
}

.left {
    flex: 200px 0 0;
    background-color: lightgreen;
     margin-right: auto; 
}

.right {
    flex: 100px 1 1;
    background-color: yellow;
    max-width: 200px;
}

.disappears {
    flex: 200px 0 1;
    background-color: papayawhip;
}

＆＃13;

<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="disappears">dis</div>
<div class="disappears">dis</div>
</div>

＆＃13;

Answer 3

您需要将UserTest添加到overflow:hidden;

#container

Answer 4

经过更多的研究和测试，我终于找到了一个解决方案，其中包含 demo ：

＆＃13;

.item1 {background-color: red;}
.item2 {background-color: yellow;}
.item3 {background-color: blue;}

#container {
    width: 95%;
    display: flex;
    justify-content: space-between;
}

/* affects container_left and container_right divs */
 #container > div {
    display: flex;
}
/* affects items */
 #container > div > div {
    width: 100px;
    min-width: 100px; /* to avoid shrinking in IE 11*/
    height: 50px;
}

#container, #container > div {
    /* reading from right to left (RTL)*/
    /* flex-direction: row-reverse; */
}

＆＃13;

<div id="container">
    <div class="container_left">
        <div class="item1">item1</div>
    </div>
    <div class="container_right">
        <div class="item2">item2</div>
        <div class="item3">item3</div>
    </div>
</div>

＆＃13;

注意：

至少在Firefox（v 37.0.2）和Internet Explorer（IE 11）中，它会产生效果。
在铬合金（v 42.0.2311.135 m）中，它并不尊重最小宽度。也许有一些方法我没有意识到。
更改了html，为左右项添加了2个容器（如果需要，还可以添加中间容器）。在css中使用flex属性和＆＃34; justify-content：space-between＆＃34;对齐容器。
可以轻松地将新项目添加到正确的位置（仅使用html），而无需使用网格系统。
如果您想要撤消项目顺序（从右到左语言），还添加了一些css代码以取消注释。

如何在响应容器（％宽度）的同一行中左右对齐多个div？

4 个答案: