Question

我对3列布局进行了以下设置：

@Entity
@Table(name="foreign_stories")
@SuppressWarnings("serial")
public class ForeignStories extends Model {
    @Id
    @NotNull
    Long id;

    @ManyToMany(cascade = CascadeType.ALL)
    List<Story> foreignStories = new ArrayList<Story>();
}

此代码适用于以下html：

#column-menu {
float: left;
width: 25%;
}

#column-main {
float: right;
width: 55%;
}

#column-side {
float: left;
width: 20%;
}

我不承诺使用花车。只是碰巧它与上述结构一起工作，除非列侧没有任何东西。在这种情况下，我希望column-main覆盖额外的宽度，而不是限制在55％。有没有办法单独使用CSS来构建这种灵活性？

Answer 1

如果您想使用浮点数进行操作，则必须重新排序元素：

.column-side {
  float: left;
  width: 20%;
  background: #00ffff;
}
.column-menu {
  float: left;
  width: 25%;
  background: #00ff00;
}
.column-main {
  overflow: hidden;
  background: #ffff00;
}

<div class="column-side">Side</div>
<div class="column-menu">Menu</div>
<div class="column-main">Main</div>
<hr />
<div class="column-side"></div>
<div class="column-menu">Menu</div>
<div class="column-main">Main</div>

Answer 2

那么在这种情况下你需要这样的东西：如果您删除<div id="column-menu" class="align">my sub menu</div>，您将看到它如何正常流动。

＆＃13;

.wrapper {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.align {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
#column-menu {
  width: 25%;
  background: red;
}
#column-main {
  width: 55%;
  background: blue;
}
#column-side {
  width: 25%;
  background: green;
}

＆＃13;

<div class="wrapper">
  <div id="column-side" class="align">my right side content</div>
  <div id="column-main" class="align">my main content</div>
  <div id="column-menu" class="align">my sub menu</div>
</div>

＆＃13;

快速解释这里发生了什么：

您正在使用table-layout:fixed;它会自动将子元素与相对css规则的比例平均分配，在这种情况下为display:table-cell;

现在因为我们不希望它相等我们设置百分比但是由于固定属性在删除div时剩下的两个div只会跨越比例并自动计算宽度应该是多少仍然占据容器的整个宽度。

通过CSS2灵活的第二和第三列系统

2 个答案: