


How to implement responsive layout of images and text using CSS and Flexbox?
Apr 05, 2025 pm 06:39 PMCSS and Flexbox implement responsive picture text layout
Building a responsive web layout is a core requirement in web development. This article will demonstrate how to use CSS and Flexbox to implement a responsive layout with pictures on the left (200x200 pixels) and text on the right. On a large screen, text occupies the remaining space on the right; on a small screen (such as a mobile phone), the image is displayed above the text.
The following code shows how to achieve this using Flexbox and media queries:
Initial code (there is a problem):
<meta charset="utf-8"> <title>Flexbox example</title> <style> .container { display: flex; flex-direction: row; /* 默認(rèn)水平布局 */ } .image { width: 200px; height: 200px; background-color: #f0f0f0; margin-right: 20px; /* 圖片和文本之間的間距 */ } .text { flex: 1; /* 右側(cè)文本占據(jù)剩余空間 */ } /* 在小尺寸屏幕上媒體查詢 */ @media screen and (max-width: 600px) { .container { flex-direction: column; /* 垂直布局 */ } .image { margin-bottom: 20px; /* 圖片下方留出間距 */ } } </style> <div class="container"> <div class="image"></div> <div class="text"> <p>lorem ipsum dolor sit amet, consistetur apiscing elit. sed consequat placerat lorem.</p> </div> </div>
The problem with the above code is that the layout is not adaptable to the screen width, but is scaled equally. This is because of the missing viewport metadata settings.
Solution: Add viewport metadata and adjust CSS
To solve this problem, we need to Partially add viewport metadata tags and adjust the CSS code:
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; } .image { width: 200px; height: 200px; } .text { flex: 1; } /* 在小尺寸設(shè)備上,重置布局 */ @media (max-width: 600px) { .container { flex-direction: column; /* 將布局改為垂直方向 */ } .image { width: 200px; height: 200px; } .text { width: auto; /* 讓元素寬度自適應(yīng) */ height: auto; /* 讓元素高度自適應(yīng) */ } /* 取消 .text 的 flex 屬性 */ .text { flex: initial; /* 或者可以使用 flex: none; */ } } </style> <div class="container"> <div class="image">picture</div> <div class="text">text</div> </div>
We implement a truly responsive layout by adding viewport
metadata and tweaking flex
properties, and changing flex-direction
to column
in small screen situations. The layout will now be adaptively adjusted according to the device's screen width.
The above is the detailed content of How to implement responsive layout of images and text using CSS and Flexbox?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Ethereum is a decentralized application platform based on smart contracts, and its native token ETH can be obtained in a variety of ways. 1. Register an account through centralized platforms such as Binance and Ouyiok, complete KYC certification and purchase ETH with stablecoins; 2. Connect to digital storage through decentralized platforms, and directly exchange ETH with stablecoins or other tokens; 3. Participate in network pledge, and you can choose independent pledge (requires 32 ETH), liquid pledge services or one-click pledge on the centralized platform to obtain rewards; 4. Earn ETH by providing services to Web3 projects, completing tasks or obtaining airdrops. It is recommended that beginners start from mainstream centralized platforms, gradually transition to decentralized methods, and always attach importance to asset security and independent research, to

What is Treehouse(TREE)? How does Treehouse (TREE) work? Treehouse Products tETHDOR - Decentralized Quotation Rate GoNuts Points System Treehouse Highlights TREE Tokens and Token Economics Overview of the Third Quarter of 2025 Roadmap Development Team, Investors and Partners Treehouse Founding Team Investment Fund Partner Summary As DeFi continues to expand, the demand for fixed income products is growing, and its role is similar to the role of bonds in traditional financial markets. However, building on blockchain

Table of Contents Crypto Market Panoramic Nugget Popular Token VINEVine (114.79%, Circular Market Value of US$144 million) ZORAZora (16.46%, Circular Market Value of US$290 million) NAVXNAVIProtocol (10.36%, Circular Market Value of US$35.7624 million) Alpha interprets the NFT sales on Ethereum chain in the past seven days, and CryptoPunks ranked first in the decentralized prover network Succinct launched the Succinct Foundation, which may be the token TGE

A verbal battle about the value of "creator tokens" swept across the crypto social circle. Base and Solana's two major public chain helmsmans had a rare head-on confrontation, and a fierce debate around ZORA and Pump.fun instantly ignited the discussion craze on CryptoTwitter. Where did this gunpowder-filled confrontation come from? Let's find out. Controversy broke out: The fuse of Sterling Crispin's attack on Zora was DelComplex researcher Sterling Crispin publicly bombarded Zora on social platforms. Zora is a social protocol on the Base chain, focusing on tokenizing user homepage and content

Directory What is Zircuit How to operate Zircuit Main features of Zircuit Hybrid architecture AI security EVM compatibility security Native bridge Zircuit points Zircuit staking What is Zircuit Token (ZRC) Zircuit (ZRC) Coin Price Prediction How to buy ZRC Coin? Conclusion In recent years, the niche market of the Layer2 blockchain platform that provides services to the Ethereum (ETH) Layer1 network has flourished, mainly due to network congestion, high handling fees and poor scalability. Many of these platforms use up-volume technology, multiple transaction batches processed off-chain

The failure to register a Binance account is mainly caused by regional IP blockade, network abnormalities, KYC authentication failure, account duplication, device compatibility issues and system maintenance. 1. Use unrestricted regional nodes to ensure network stability; 2. Submit clear and complete certificate information and match nationality; 3. Register with unbound email address; 4. Clean the browser cache or replace the device; 5. Avoid maintenance periods and pay attention to the official announcement; 6. After registration, you can immediately enable 2FA, address whitelist and anti-phishing code, which can complete registration within 10 minutes and improve security by more than 90%, and finally build a compliance and security closed loop.

User agent stylesheets are the default CSS styles that browsers automatically apply to ensure that HTML elements that have not added custom styles are still basic readable. They affect the initial appearance of the page, but there are differences between browsers, which may lead to inconsistent display. Developers often solve this problem by resetting or standardizing styles. Use the Developer Tools' Compute or Style panel to view the default styles. Common coverage operations include clearing inner and outer margins, modifying link underscores, adjusting title sizes and unifying button styles. Understanding user agent styles can help improve cross-browser consistency and enable precise layout control.

Backdrop-filter is used to apply visual effects to the content behind the elements. 1. Use backdrop-filter:blur(10px) and other syntax to achieve the frosted glass effect; 2. Supports multiple filter functions such as blur, brightness, contrast, etc. and can be superimposed; 3. It is often used in glass card design, and it is necessary to ensure that the elements overlap with the background; 4. Modern browsers have good support, and @supports can be used to provide downgrade solutions; 5. Avoid excessive blur values and frequent redrawing to optimize performance. This attribute only takes effect when there is content behind the elements.
