Question

 Logo Here.                                   | --  3 Column -- |
               Error Message here             |                 |
____________________________________________ ||     W:232.5px   |
| - - 1 Column -- |     -- 2nd Column --     ||                 |
|    W:232.5px    |        W:465px           ||                 |
|_________________|__________________________||_________________|
 Max W: 930px.

嘿，任何人都可以向我解释如何实现这个CSS。

3列，都具有100％的高度，具体取决于列中的内容，例如，第1列可能是大于第2列和/或第3列。

在最小化浏览器时我也努力保持其结构，例如第3列将在第1列下。所以，如果可能的话，我想知道如何保持其结构最小化。

Answer 1

我会选择带有align-items的Flexbox：flex-end;

这会将项目对齐到容器的底部，并尊重它们的可变高度和宽度。

Here is a great reference for flexboxes

Answer 2

要防止第3列进入第1列，请将所有内容包装在具有固定宽度的容器内，或使用％作为列的单位

Answer 3

您正在寻找的是非常直接的，您只需要在前两列中添加一个包装器并将其用作“主”列。

就响应性而言，最好的方法是将像素转换为百分比值，然后在宽度开始变得太紧/过宽时使用断点。

 |________________________________________________| | --Side Column-- |
 |               - - Main Column - -              | |                 |
 |                     W: 75%                     | |                 |
 |________________________________________________| |                 | 
 | Logo Here.                                     | |                 |  
 |________________________________________________| |                 |
 |                Error Message here              | |                 |
 |________________________________________________| |                 |
 | ______________________________________________ | |       W:25%     |
 | | - - 1 Column -- |     -- 2nd Column --     | | |                 |
 | |      W:33.3%    |          W:66.6%         | | |                 |
 | |_________________|__________________________| | |_________________|
 |                                                | 
  ------------------------------------------------

Answer 4

这样的事可能......

body {
	border:0
	}
#logo {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 200px;
	height: 64px;
	background-color: blue;
	}
#error-msg {
	position: fixed;
	top: 0px;
	left: 200px;
	width: 497px;
	height: 64px;
	background-color: green;
	}
#column1 {
	position: fixed;
	top: 64px;
	left: 0px;
	width: 232px;
	height: 100%;
	background-color: #efefaa;
	}
#column2 {
	position: fixed;
	top: 64px;
	left: 233px;
	width: 465px;
	height: 100%;
	background-color: #aaefef;
	}
#column3 {
	position: fixed;
	top: 0px;
	left: 698px;
	width: 232px;
	height: 100%;
	background-color: #efaaef;
	}

<div id="logo"></div>
<div id="error-msg"></div>
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>

如何实现这个设计CSS

4 个答案: