初始布局为两栏,当窗口宽度减少到一定程度,布局变为一栏

解决方案:使用最小宽度

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>atitle>
        <style type="text/css">
        body{
            height: 100px;
            margin: 0;
        }
        .div1{
            width: 50%;
            height: 100px;
            float: left;
            background-color: pink;
            min-width: 300px;
        }
        .div2{
            width: 50%;
            height: 100px;
            float: left;
            background-color: blue;
            min-width: 300px;
        }
        style>
    head>
    <body>
        <div class="div1">1div>
        <div class="div2">2div>
    body>
html>

你可能感兴趣的:(前端学习,css3,css,前端)