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