Question

示例：

<div class="container">
    <div>variable</div>
    <div>fixed</div>
    <div>variable with min-width</div>
    <div>fixed</div>
    <div>variable</div>
</div>

我希望整个事物与视口一样宽。

我知道如何为三列做到这一点，但我完全迷失了五列版本。我甚至没有一个如何运作的概念。通常的三列样式涉及固定列的绝对定位，但由于最外面的列具有可变宽度，因此不起作用。我迷路了。

有什么想法吗？

这就是我的尝试：

HTML：

<div class="container">
    <div class="left">var</div>
    <div class="inner_container">
        <div class="inner_left">fix</div>
        <div class="middle">var</div>
        <div class="inner_right">fix</div>
    </div>
    <div class="right">var</div>
</div>

CSS：

.container { 
    position:relative;
}
.container div { 
    background: yellow;
}
.container .left,
.container .right {
    background: orange;
    width: 15%;
}

.inner_container { 
    position:relative;
}
.inner_container div {
    margin:0 50px;
    background:lightgreen;
}
.inner_container .inner_left,
.inner_container .inner_right {
    background:lightblue;
    position:absolute;
    top:0;
    width:50px;
}
.inner_container .inner_left {
    left:-50px;
}
.inner_container .inner_right {
    right:-50px;
}

＆＃34; inner_container＆＃34;基本上是通常的三列解决方案。如果我将inner_container设置为＆＃34; left：15％＆＃34;整个内部容器向右移动，但仍然是自己的＆＃34; line＆＃34;。

Answer 1

Intent launchIntent = new Intent(Intent.ACTION_MAIN); launchIntent.addCategory(Intent.CATEGORY_HOME); Intent chooser = Intent.createChooser(launchIntent, "Complete Action using.."); activity.startActivity(chooser);可以做到这一点。

＆＃13;

flexbox

＆＃13;

* {
  box-sizing: border-box;
}

.container div {
  height: 75px;
  border:1px solid grey;
}

.container {
  display: flex;
}

.variable {
  background: lightgreen;
  flex: 1 0 auto
}

.fixed {
  background: lightblue;
  flex: 0 0 150px;
}

.min-width {
  flex-basis:250px;
  min-width:250px;
  background: pink;
}

＆＃13;

Codepen Demo

如何使用固定/可变宽度交替设置五行样式？

1 个答案: