Use the float attribute of CSS to implement a secondary responsive page-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Use the float attribute of CSS to implement a secondary responsive page

不言

Nov 09, 2018 pm 04:26 PM

float attribute

This article introduces you to the use of CSS float attributes to implement secondary responsive pages. The content is very detailed and has certain reference value.

Without further ado, let’s go straight to the text~

We use the float: left attribute to implement a secondary responsive page (recommended course: CSS video tutorial)

The code is as follows:

LRColumnSimple.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
<meta charset="utf-8" />
</head>
<body>
 <div class="Container">
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn"><img  src="/static/imghwm/default1.png"  data-src="image/flower.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img  src="/static/imghwm/default1.png"  data-src="image/flowers.jpg"  class="lazy"     style="max-width:90%" / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn"><img  src="/static/imghwm/default1.png"  data-src="image/fruit.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img  src="/static/imghwm/default1.png"  data-src="image/greatwall.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn"><img  src="/static/imghwm/default1.png"  data-src="image/1.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img  src="/static/imghwm/default1.png"  data-src="image/keiskei.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

LRColumnSimple.css

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:760px;  
  margin-left:auto;    
  margin-right:auto;
}
.LeftColumn {
 float:left;  
 width:360px;
}
.RightColumn {
  float:left;  
  width:360px;
}
.EndColumn {  
clear:left;
}

The effect on the browser is as follows:

Use the float attribute of CSS to implement a secondary responsive page

Supplement: Display the image in the middle of the frame

If you display the image in the middle of the frame, you need to set text-align: center for the image.

The code is as follows:

LRColumnSimpleImageCenter.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
<meta charset="utf-8" />
</head>
<body>
  <div class="Container">
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/flower.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/flowers.jpg"  class="lazy"     style="max-width:90%" / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/fruit.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/greatwall.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/1.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/keiskei.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

The effect is as follows: the image is displayed in the middle

Use the float attribute of CSS to implement a secondary responsive page

Responsive display on the page

LRColumnSimpleResponsiveW1.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW1.css" />
<meta charset="utf-8" />
</head>
<body>
   <div class="Container">
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/flower.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/flowers.jpg"  class="lazy"     style="max-width:90%" / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/fruit.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/greatwall.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/1.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/keiskei.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

LRColumnSimpleResponsiveW1.css

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:70%;  
  margin-left:auto;    
  margin-right:auto;
}
.LeftColumn {
  float:left;  
  width:360px;
}
.RightColumn {
  float:left;  
  width:360px;
}
.EndColumn {
  clear:left;
}

The effect is as follows:

Use the float attribute of CSS to implement a secondary responsive page

If you reduce the width here, it will change to something like the image below. It's left aligned with a float, but since the width is narrowed, it becomes a wrapped display. At this time, when the image is on the right border, the description text of the image is displayed on the image, and the description text on the left is displayed at the bottom of the image.

Use the float attribute of CSS to implement a secondary responsive page

Example of response:

In the previous HTML, there was the following problem: when the window width narrowed and the frame was collapsed, the description The position of the text cannot be a matter of same location. Let me introduce the code to avoid this phenomenon.

LRColumnSimpleResponsiveW2.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW2.css" />
	<meta charset="utf-8" />
	</head>
	<body>
     <div class="Container">
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/flower.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/flowers.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>

    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/fruit.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/greatwall.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/1.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/keiskei.jpg"  class="lazy"     style="max-width:90%"  / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

LRColumnSimpleResponsiveW2.css

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:70%;  
  margin-left:auto;    
  margin-right:auto;
}
.TextColumnA {
  float:left;  
  width:360px;
}
.ImageColumnA {
  float:left;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.TextColumnB {
  float:right;  
  width:360px;
}
.ImageColumnB {
  float:right;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.EndColumn {
  clear:both;
}

Description:

TextColumnA and ImageColumnA classes are used for descriptive text on the left, And the frame is used to display the image on the right. For these classes, float:left is specified, and the descriptive statements described earlier are on the left and the image is on the right. On the other hand, TextColumnB and ImageColumnB classes are used for descriptive text on the right side, while frames are used to display images on the left side. In these classes, float:right is specified, so the descriptive text described earlier will be placed on the right and the image will be placed on the left.

When the window width is narrowed, the previously described frame is first displayed in the float:left frame. Even in frames where float:right is specified, the placement of the descriptive statements described earlier is performed first, so the text describing the frame will be displayed above the image.

The effect is as follows:

Use the float attribute of CSS to implement a secondary responsive page

Reduce the width of the window. The frame will collapse, but the description text will appear evenly across the image.

Use the float attribute of CSS to implement a secondary responsive page

Let’s look at a practical example based on the previous code

LRColumnSimpleResponsive.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsive.css" />
<meta charset="utf-8" />
</head>
<body>
  <div class="Container">
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/flower.jpg"  class="lazy"   / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/flowers.jpg"  class="lazy"   / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/fruit.jpg"  class="lazy"   / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/greatwall.jpg"  class="lazy"   / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/1.jpg"  class="lazy"   / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="/static/imghwm/default1.png"  data-src="image/keiskei.jpg"  class="lazy"   / alt="Use the float attribute of CSS to implement a secondary responsive page" ></div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

LRColumnSimpleResponsive.css

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:760px;  
  margin-left:auto;    
  margin-right:auto;
}
.TextColumnA {
  float:left;  
  width:360px;
}
.ImageColumnA {
  float:left;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.ImageColumnA img{
  width:200px;
}
.TextColumnB {
  float:right;  
  width:360px;
}
.ImageColumnB {
  float:right;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.ImageColumnB img{
  width:200px;
}
.EndColumn {
  clear:both;
}
@media screen and (max-width: 760px) {
   .Container {
       width:95%;
  }  
  .TextColumnA {
      float:none;    
      width:100%;
  }  
  .ImageColumnA {
      float:none;    
      width:100%;    
      text-align:center;    
      margin-left:auto;    
      margin-right:auto;
  }  
  .ImageColumnA img{
      width:80%;
  }  
  .TextColumnB {
      width:100%;
  }  
  .ImageColumnB {
      width:100%;    
      text-align:center;    
      margin-left:auto;    
      margin-right:auto;
  } 
  .ImageColumnB img{
      width:80%;
  }
}

Description:

It is the same as the previous code, but if using CSS media queries and the web browser is 760 pixels wide or less, the float is set to none and the column is suppressed. Also, the image is displayed at 80% of the screen width. It is thus displayed in a column.

The effect is as follows:

Use the float attribute of CSS to implement a secondary responsive page

If the width of the window is 760 pixels or more, it is displayed in two columns.

Use the float attribute of CSS to implement a secondary responsive page

#When the width of the window becomes 760 pixels or smaller, it becomes one column. The width of the image is also 80% of the horizontal width.

Use the float attribute of CSS to implement a secondary responsive page

The above is the detailed content of Use the float attribute of CSS to implement a secondary responsive page. 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 Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AM

Linking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks agoByDDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks agoByDDD

Nordhold: Fusion System, Explained

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver CS6

Visual web development tools

WebStorm Mac version

Useful JavaScript development tools

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Hot Topics

1666

1425

1328

1273

1253