Table of Contents
CSS Responsive Layout: The perfect combination of pictures and text
Requirement background
Problem and Solution: The Importance of Viewport
Complete solution: HTML and CSS code
Home Web Front-end CSS Tutorial How to use CSS and Flexbox to implement responsive layout of images and text at different screen sizes?

How to use CSS and Flexbox to implement responsive layout of images and text at different screen sizes?

Apr 05, 2025 pm 06:06 PM
css Browser ai web page layout

How to use CSS and Flexbox to implement responsive layout of images and text at different screen sizes?

CSS Responsive Layout: The perfect combination of pictures and text

Creating responsive web layouts that allow images and text to be perfectly presented at different screen sizes is a common challenge in front-end development. This article will explain in detail how to use CSS's Flexbox and media query to achieve the effect of displaying pictures and text side by side on larger screens, while on smaller screens (such as mobile phones), the images are on top and text are on bottom.

Requirement background

The goal is to use CSS and Flexbox to build a layout with fixed-size pictures (200x200 pixels) and a piece of text. On a large screen, text takes up the remaining space; on a small screen, the image is located above the text.

Problem and Solution: The Importance of Viewport

Previous attempts may have encountered the problem that the layout does not change with the screen width, which is usually due to the lack of viewport settings. The viewport is the area in the browser window that displays the content of the web page. Correct viewport settings ensure that web pages are rendered and scaled correctly on different devices.

Complete solution: HTML and CSS code

In order to achieve responsive layout, it is necessary to Partially add the viewport meta tag and adjust the CSS code:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox layout examples</title>
    <style>
        .container {
            display: flex;
        }

        .image {
            width: 200px;
            height: 200px;
        }

        .text {
            flex: 1; /* 占据剩余空间 */
        }

        /* 小屏幕媒体查询 (例如手机) */
        @media (max-width: 600px) {
            .container {
                flex-direction: column; /* 垂直布局 */
            }
            .text {
                flex: initial; /* 取消 flex 属性,让文本自适应宽度 */
            }
        }
    </style>


    <div class="container">
        <div class="image">picture</div>
        <div class="text">Text content</div>
    </div>

Code explanation:

  • meta name="viewport" : Set the viewport to make the page scale according to the device width.
  • .container : Use Flexbox layout.
  • .image : Set the image size.
  • .text : flex: 1; Make text occupy the remaining space.
  • @media (max-width: 600px) : Media query. When the screen width is less than 600px, set flex-direction to column to achieve vertical layout, and remove the flex attribute of .text to allow the text content to adapt to the width.

Through the above settings, the web page layout will be automatically adjusted according to the screen size to achieve a perfect responsive effect. Remember, you can adjust the value of max-width according to actual needs.

The above is the detailed content of How to use CSS and Flexbox to implement responsive layout of images and text at different screen sizes?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
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

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

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

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

The flow of funds on the chain is exposed: What new tokens are being bet on by Clever Money? The flow of funds on the chain is exposed: What new tokens are being bet on by Clever Money? Jul 16, 2025 am 10:15 AM

Ordinary investors can discover potential tokens by tracking "smart money", which are high-profit addresses, and paying attention to their trends can provide leading indicators. 1. Use tools such as Nansen and Arkham Intelligence to analyze the data on the chain to view the buying and holdings of smart money; 2. Use Dune Analytics to obtain community-created dashboards to monitor the flow of funds; 3. Follow platforms such as Lookonchain to obtain real-time intelligence. Recently, Cangming Money is planning to re-polize LRT track, DePIN project, modular ecosystem and RWA protocol. For example, a certain LRT protocol has obtained a large amount of early deposits, a certain DePIN project has been accumulated continuously, a certain game public chain has been supported by the industry treasury, and a certain RWA protocol has attracted institutions to enter.

Bitcoin, Chainlink, and RWA resonance rise: crypto market enters institutional logic? Bitcoin, Chainlink, and RWA resonance rise: crypto market enters institutional logic? Jul 16, 2025 am 10:03 AM

The coordinated rise of Bitcoin, Chainlink and RWA marks the shift toward institutional narrative dominance in the crypto market. Bitcoin, as a macro hedging asset allocated by institutions, provides a stable foundation for the market; Chainlink has become a key bridge connecting the reality and the digital world through oracle and cross-chain technology; RWA provides a compliance path for traditional capital entry. The three jointly built a complete logical closed loop of institutional entry: 1) allocate BTC to stabilize the balance sheet; 2) expand on-chain asset management through RWA; 3) rely on Chainlink to build underlying infrastructure, indicating that the market has entered a new stage driven by real demand.

Pre-sales of Filecoin, Render, and AI storage are heating up: Is the explosion point of Web3 infrastructure coming? Pre-sales of Filecoin, Render, and AI storage are heating up: Is the explosion point of Web3 infrastructure coming? Jul 16, 2025 am 09:51 AM

Yes, Web3 infrastructure is exploding expectations as demand for AI heats up. Filecoin integrates computing power through the "Compute over Data" plan to support AI data processing and training; Render Network provides distributed GPU computing power to serve AIGC graph rendering; Arweave supports AI model weights and data traceability with permanent storage characteristics; the three are combining technology upgrades and ecological capital promotion, and are moving from the edge to the underlying core of AI.

What are the cryptocurrency market websites? Recommended virtual currency market websites What are the cryptocurrency market websites? Recommended virtual currency market websites Jul 17, 2025 pm 09:30 PM

In the ever-changing virtual currency market, timely and accurate market data is crucial. The free market website provides investors with a convenient way to understand key information such as price fluctuations, trading volume, and market value changes of various digital assets in real time. These platforms usually aggregate data from multiple exchanges, and users can get a comprehensive market overview without switching between exchanges, which greatly reduces the threshold for ordinary investors to obtain information.

Changes in the flow of on-chain funds: What tracks are new funds pouring into? Changes in the flow of on-chain funds: What tracks are new funds pouring into? Jul 16, 2025 am 09:42 AM

The most popular tracks for new funds currently include re-staking ecosystems, integration of AI and Crypto, revival of the Bitcoin ecosystem and DePIN. 1) The re-staking protocol represented by EigenLayer improves capital efficiency and absorbs a large amount of long-term capital; 2) The combination of AI and blockchain has spawned decentralized computing power and data projects such as Render, Akash, Fetch.ai, etc.; 3) The Bitcoin ecosystem expands application scenarios through Ordinals, BRC-20 and Runes protocols to activate silent funds; 4) DePIN builds a realistic infrastructure through token incentives to attract the attention of industrial capital.

Crypto market value exceeds US$3 trillion: Which sectors are funds betting on? Crypto market value exceeds US$3 trillion: Which sectors are funds betting on? Jul 16, 2025 am 09:45 AM

Crypto market value exceeded US$3 trillion, and funds mainly bet on seven major sectors. 1. Artificial Intelligence (AI) Blockchain: Popular currencies include FET, RNDR, AGIX, Binance and OKX launch related trading pairs and activities, funds bet on AI and decentralized computing power and data integration; 2. Layer2 and modular blockchain: ARB, OP, ZK series, TIA are attracting attention, HTX launches modular assets and provides commission rebates, funds are optimistic about their support for DeFi and GameFi; 3. RWA (real world assets): ONDO, POLYX, XDC and other related assets, OKX adds an RWA zone, and funds are expected to migrate on traditional financial chains; 4. Public chain and platform coins: SOL, BNB, HT, OKB are strong

How to trade stablecoins_A full flow diagram for beginners buying and selling How to trade stablecoins_A full flow diagram for beginners buying and selling Jul 18, 2025 am 06:00 AM

The stablecoin trading process includes the steps of registering an exchange, completing certification, buying or selling. First, choose a trusted exchange such as Binance, OKX, etc., and then complete KYC identity authentication, and then buy stablecoins through fiat currency recharge or OTC transactions. You can also transfer the stablecoins to the fund account and sell them through P2P transactions and withdraw them to the bank card or Alipay. When operating, you need to pay attention to choosing a regulated platform, confirm transaction security and handling fees.

OEX official website entrance OEX (Ouyi) platform official registration entrance OEX official website entrance OEX (Ouyi) platform official registration entrance Jul 17, 2025 pm 08:42 PM

The OEX official website entrance is the primary channel for users to enter the OEX (OEX) platform. The platform is known for its safety, efficiency and convenience, and provides currency trading, contract trading, financial management services, etc. 1. Visit the official website; 2. Click "Register" to fill in your mobile phone number or email address; 3. Set your password and verify; 4. Log in after successful registration. The platform's advantages include high security, simple operation, rich currency, and global service. It also provides beginner's guidance and teaching modules, suitable for all types of investors.

See all articles