Detailed instructions for using CSS fixed-width three-column layout-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Detailed instructions for using CSS fixed-width three-column layout

高洛峰

Mar 08, 2017 pm 03:02 PM

The left, middle and right three-column page layout is very common. Here we take a look at the application examples of CSS fixed-width three-column layout, including the arrangement method of equal width and equal spacing:

Fixed width Three-column layout
This is very basic. We can understand it directly by looking at the code:

<p id="wrapper">
 <p id="header">header</p>
 <p id="body" class="cls">
  <p id="aside">
   <p class="inner">
    aside   
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
   </p>
  </p>
  <p id="content" class="cls">
   <p id="main">
    <p class="inner">
     main   
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </p>
   </p>
   <p id="content-aside">
    <p class="inner">
     content-aside   
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </p>
   </p>
  </p>
 </p>
 <p id="footer">footer</p>
</p>

#header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}   
#body{ width: 980px; margin: 0 auto;}   
#aside{ float: left; width: 240px; background: #ccc;}   
#content{ margin-left: 240px;}   
#main{ float: left; width: 540px; background: pink;}   
#content-aside{  float: left; width: 200px; background: orange; }   
#footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}

Example: Implementing three-column pictures Equal-width and equal-spaced layout

Each picture block floats left, width 30%, left margin 2.5%:
100%=(2.5%+30%) +(2.5%+30%)+(2.5%+30%)+2.5%

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="utf-8">    
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">    
<title>三列图片等宽布局</title>    
<style>    
* {    
    margin: 0;    
    padding: 0;    
}    
img {    
    display: block;    
    width: 30%;    
    margin: 2.5% 0 0 2.5%;    
    float: left;    
}    
</style>    
</head>    
<body>    
<p>    
<img  src="/static/imghwm/default1.png"  data-src="byd.jpg"  class="lazy"   / alt="Detailed instructions for using CSS fixed-width three-column layout" ><img  src="/static/imghwm/default1.png"  data-src="byd.jpg"  class="lazy"   / alt="Detailed instructions for using CSS fixed-width three-column layout" ><img  src="/static/imghwm/default1.png"  data-src="byd.jpg"  class="lazy"   / alt="Detailed instructions for using CSS fixed-width three-column layout" >    
<img  src="/static/imghwm/default1.png"  data-src="byd.jpg"  class="lazy"   / alt="Detailed instructions for using CSS fixed-width three-column layout" ><img  src="/static/imghwm/default1.png"  data-src="byd.jpg"  class="lazy"   / alt="Detailed instructions for using CSS fixed-width three-column layout" ><img  src="/static/imghwm/default1.png"  data-src="byd.jpg"  class="lazy"   / alt="Detailed instructions for using CSS fixed-width three-column layout" >    
<img  src="/static/imghwm/default1.png"  data-src="byd.jpg"  class="lazy"   / alt="Detailed instructions for using CSS fixed-width three-column layout" ><img  src="/static/imghwm/default1.png"  data-src="byd.jpg"  class="lazy"   / alt="Detailed instructions for using CSS fixed-width three-column layout" ><img  src="/static/imghwm/default1.png"  data-src="byd.jpg"  class="lazy"   / alt="Detailed instructions for using CSS fixed-width three-column layout" >    
</p>        
</body>    
</html>

width: 30%; represents 30% of the width of the parent element.
height : 30%; If the specific height of the parent element is not set, then this height has no effect.
To achieve a responsive square, you can use the unit vw (Viewport Width):

.square {    
    width: 30%;    
    height: 30vw;    
    background: url("byd.jpg") no-repeat scroll center 0 transparent;    
    background-size: 100% 100%;    
    margin: 2.5% 0 0 2.5%;    
    float: left;    
}

However, it should be noted that lower versions of IE and lower versions of Android/iOS browsers do not support the viewport unit.
Or use JS to set the height according to the width to ensure compatibility:

<script src="jquery.js"></script>    
<script>    
$(document).ready(function(){    
    $("img").height($("img").width());    
});    
$(window).resize(function(){    
    $("img").height($("img").width());    
});    
</script>

Percentage layout can also be regarded as a responsive layout.
Simple and practical percentage layout is still very suitable for mobile WAP page layout:

min-width:320px;    
max-width:980px;    
width:100%;    
overflow-x: hidden;    
margin: 0 auto;

The minimum width is 320px, the maximum width is 980px, and the width automatically adapts between 320px and 980px, which looks okay.
Only set the width attribute percentage value in the Detailed instructions for using CSS fixed-width three-column layout tag, such as width="40%", There is no need to set the height attribute, so that the image can be scaled according to the original proportion.
The blocks in the container can also be laid out in percentages, such as 60% on the left and 40% on the right.

The above is the detailed content of Detailed instructions for using CSS fixed-width three-column layout. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The Lost CSS Tricks of Cohost.orgApr 25, 2025 am 09:51 AM

In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.

Next Level CSS Styling for CursorsApr 23, 2025 am 11:04 AM

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

Worlds Collide: Keyframe Collision Detection Using Style QueriesApr 23, 2025 am 10:42 AM

Interactive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a

Using CSS backdrop-filter for UI EffectsApr 23, 2025 am 10:20 AM

Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

SMIL on?Apr 23, 2025 am 09:57 AM

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously

'Pretty' is in the eye of the beholderApr 23, 2025 am 09:40 AM

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AM

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Tailwind's @apply Feature is Better Than it SoundsApr 23, 2025 am 09:23 AM

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio

See all articles