CSS layout-fixed width, widening, fixed width + widening, css layout

CSS layout-fixed width, widening, fixed width + widening, css layout

I have been studying the front-end for a long time. Recently I wrote a project testing system. I found that I have not fully mastered the layout of widening + fixed width. So I will summarize it here, you can look back later.

1. the simplest of course is the fixed width of one or more columns.

For example, two columns of fixed width:

<1> set a peripheral div -- container, which is the total size displayed in the two columns. It can be a fixed 800px equivalent.

<2>. set two div -- side and content in the container respectively.

Set pixels as needed, for example, 300px and 500px;

Set float: left;

2. Change the width of two columns, which is the same as 1, but change the pixel to the percentage. For example, the value is 30%, and the value is 70%.

3. The key point is that two or more columns have a fixed width and a widening value. A typical example is a column with a left fixed width and a column with a right width.

<1> set a peripheral div -- container, which is the total size displayed in the two columns. It can be a fixed 800px equivalent.

<2>. set two div -- side and wrap_content in the container respectively.

Set the width as needed, such as width: 300px and width: 100%;

Margin-right:-300px;

<3> set float: left;

<4>. Set another div: content, margin-right: 300px in wrap_content;

Similarly, if it is left fixed width, right width is also a truth.

In addition, some taoyou mentioned another method:

Is <1> the first two steps are the same as mine <2> side setting float: left, while wrap_content only sets margin-left: 300px <3> content to width: 100%

It is feasible to pass the test. Thank you for your reply ~~~ You are also welcome to reply to more layout methods.

Css wide-out Layout

As you said, this is probably the case.
But it is also related to the browser. I tried it with the 2345 browser, without writing margin-left: 300px; it can also "go top ".
This sometimes depends on the browser, but the writing is the best. When writing, most browsers should be effective.

How do I determine the size of the background when div and css are used to deploy a webpage with varying width and width?

Set to 100% format