CSS layout tutorial: The best way to implement a two-column responsive layout-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

CSS layout tutorial: The best way to implement a two-column responsive layout

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 18, 2023 am 11:04 AM

Responsive layoutcss layouttwo column layout

CSS layout tutorial: The best way to implement a two-column responsive layout

Introduction:
In web design, responsive layout is a very important technology that enables web pages to automatically adjust their layout according to the screen size and resolution of the user's device, providing a better user experience. In this tutorial, we'll show you how to use CSS to implement a simple two-column responsive layout, and provide specific code examples.

1. HTML structure:
First, we need to create a basic HTML structure, as shown below:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>两栏响应式布局</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="left-column">
      <!-- 左侧内容 -->
    </div>
    <div class="right-column">
      <!-- 右侧内容 -->
    </div>
  </div>
</body>
</html>

2. CSS style:
Next, we need to This layout adds some CSS styles to achieve the desired effect. We will use flexbox layout to implement this responsive layout, so add the following code in the style.css file:

.container {
  display: flex; 
  /* 设为flex布局，子元素将自动排列 */
  flex-wrap: wrap; 
  /* 如果子元素太多放不下，换行显示 */
}

.left-column {
  flex: 1; 
  /* 左侧栏占据1份，即整个宽度的1/3 */
  background-color: #eee; 
  /* 左侧栏的背景颜色 */
  padding: 20px; 
  /* 内边距，让内容离边框有一定距离 */
}

.right-column {
  flex: 2; 
  /* 右侧栏占据2份，即整个宽度的2/3 */
  background-color: #ddd; 
  /* 右侧栏的背景颜色 */
  padding: 20px; 
  /* 内边距，让内容离边框有一定距离 */
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .left-column, .right-column {
    flex: 1; 
    /* 在小屏幕上将左右侧栏宽度设为100% */
  }
}

3. Description and Demonstration:
In the above code , we first set the entire layout container .container to display: flex, so that the sub-elements .left-column and .right-column will automatically arrange them on one line.

Next, specify the width ratio of the left and right side columns through the flex attribute. In this example, the left column is set to flex: 1 and the right column is set to flex: 2, which means the right column is twice as wide as the left column .

Finally, we use media queries @media for responsive design. When the screen width is less than or equal to 768px, the width of the left and right sidebars is set to 100% to adapt to small screen devices.

4. Summary:
Through the above code example, we can implement a simple two-column responsive layout. By flexibly using CSS's flexbox layout and media queries, we can quickly implement layout effects that adapt to different devices.

At the same time, if you need to further beautify and optimize the layout, you can add other CSS styles and adjust the column width ratio according to your own needs.

I hope this tutorial will be helpful for you to learn and apply responsive layout!

The above is the detailed content of CSS layout tutorial: The best way to implement a two-column responsive 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

Two Images and an API: Everything We Need for Recoloring ProductsApr 15, 2025 am 11:27 AM

I recently found a solution to dynamically update the color of any product image. So with just one of a product, we can colorize it in different ways to show

Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest ConnectionsApr 15, 2025 am 11:19 AM

In this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds

Options for Hosting Your Own Non-JavaScript-Based AnalyticsApr 15, 2025 am 11:09 AM

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used

It's All In the Head: Managing the Document Head of a React Powered Site With React HelmetApr 15, 2025 am 11:01 AM

The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its

What is super() in JavaScript?Apr 15, 2025 am 10:59 AM

What's happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super. to access its

Comparing the Different Types of Native JavaScript PopupsApr 15, 2025 am 10:48 AM

JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:

Why Are Accessible Websites so Hard to Build?Apr 15, 2025 am 10:45 AM

I was chatting with some front-end folks the other day about why so many companies struggle at making accessible websites. Why are accessible websites so hard