html - 响应框和文本不对齐

标签 html css responsive-design

目前在 CSS 中遇到一个非常烦人和棘手的问题。

基本上我有 2 行，6 个框。

enter image description here

我还没有处理第二行，因为我正在完成顶行的第一个框，然后再复制/粘贴代码。

我遇到的问题是文本的宽度。

当您缩小浏览器时会发生以下情况:

enter image description here

文本不应该消失，因为它们仍然有足够的框空间。此时浏览器甚至还不到我 macbook pro 屏幕的一半，浏览器大约占屏幕的 70%，但框文本已经消失了吗？

我怎样才能使这 2 行 6 个框响应至少一半的屏幕？然后从那里处理让它们垂直排列，一次一个盒子(对于手机)。

我真的已经弄乱了 2 个小时的 css 并且不知道，有人请帮忙!我是 CSS 的新手，正在为我的 IT 公司构建这个网站，并最终想进行 Web 开发，所以我暂时没有在这里发帖，但我确实没有想法。

我的 html:

<head>
        <title>Microfuse Solutions - Home</title>
        <meta charset="utf-8" />


        <link rel="stylesheet" href="css/home.css" type="text/css" />

        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Jura:400,600' rel='stylesheet' type='text/css'>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <header class="header">
        <div class="mainheader">
            <nav>
                <h1>MICROFUSE SOLUTIONS.</h1>
                <ul>
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="#">Services</a>
                        <ul>
                            <li><a href="#">PC Repairs</a></li>
                            <li><a href="#">Networking & Internet</a></li>
                            <li><a href="#">Home & Work Servers</a></li>
                            <li><a href="#">Support Services</a></li>
                            <li><a href="#">Website Development</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">About Us</a>
                        <ul>
                            <li><a href="#">Our Team</a></li>
                            <li><a href="#">Our Story</a></li>
                            <li><a href="#">Our Portfolio</a></li>
                            <li><a href="#">Testimonials</a></li>
                        </ul></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul>
            </nav>

            <div class="separator"></div>

            <div class="subheader">
                <div class="left-content">
                    <h1><b>Hello.</b></h1>
                    <h2>Welcome to MICROFUSE</h2>

                    <p>We assist individuals and businesses in a wide range of technical problems.<br/> We provide a fast, affordable, and reliable service, that comes with a guarantee for your problem to be fixed.<br/> If we do not fix your problem, then we do not charge you.</p>
                </div>

                <div class="padding"></div>

                <div class="right-content">
                    <img src="images/subheaderlogo.png"/>
                </div>
            </div>

        </div>
    </header>


    <div class="content">

    <div class="firstsection">
        <div class="top-row">
            <h2> What do we do? </h2>
            <div class="left-box-container">
                <div class="image">
                    <img src="images/columns/websites.png">
                </div>
                <div class="text">
                    <h1><a href="#">Mobile Solutions</a></h1>
                    <ul>
                        <li><img src="images/columns/plus.png"/>No fix no fee!</li>
                    <li><img src="images/columns/plus.png"/>Fix your tech onsite</li>
                    <li><img src="images/columns/plus.png"/>Flexible timeframes</li>
                    <li><img src="images/columns/plus.png"/>Competetive prices</li>
                    </ul>
                </div>
            </div>

            <div class="middle-box-container">
                <div class="image">
                    <img src="images/columns/websites.png">
                </div>
                <div class="text">
                    <h1><a href="#">PC Repairs</a></h1>
                    <h4><img src="images/columns/plus.png"/>No fix no fee!</h4>
                    <h4><img src="images/columns/plus.png"/>Fix your tech onsite</h4>
                    <h4><img src="images/columns/plus.png"/>Flexible timeframes</h4>
                    <h4><img src="images/columns/plus.png"/>Competetive prices</h4>
                </div>
            </div>

            <div class="right-box-container">
                <div class="image">
                    <img src="images/columns/websites.png">
                </div>
                <div class="text">
                    <h1><a href="#">Mobile Solutions</a></h1>
                    <h4><img src="images/columns/plus.png"/>No fix no fee!</h4>
                    <h4><img src="images/columns/plus.png"/>Fix your tech onsite</h4>
                    <h4><img src="images/columns/plus.png"/>Flexible timeframes</h4>
                    <h4><img src="images/columns/plus.png"/>Competetive prices</h4>
                </div>
            </div>
        </div>

        <div class="bottom-row">
            <div class="left-box-container">
                <div class="image">
                    <img src="images/columns/websites.png">
                </div>
                <div class="text">
                    <h1><a href="#">Mobile Solutions</a></h1>
                    <h4><img src="images/columns/plus.png"/>No fix no fee!</h4>
                    <h4><img src="images/columns/plus.png"/>Fix your tech onsite</h4>
                    <h4><img src="images/columns/plus.png"/>Flexible timeframes</h4>
                    <h4><img src="images/columns/plus.png"/>Competetive prices</h4>
                </div>
            </div>

            <div class="middle-box-container">
                <div class="image">
                    <img src="images/columns/websites.png">
                </div>
                <div class="text">
                    <h1><a href="#">Mobile Solutions</a></h1>
                    <h4><img src="images/columns/plus.png"/>No fix no fee!</h4>
                    <h4><img src="images/columns/plus.png"/>Fix your tech onsite</h4>
                    <h4><img src="images/columns/plus.png"/>Flexible timeframes</h4>
                    <h4><img src="images/columns/plus.png"/>Competetive prices</h4>
                </div>
            </div>

            <div class="right-box-container">
                <div class="image">
                    <img src="images/columns/websites.png">
                </div>
                <div class="text">
                    <h1><a href="#">Mobile Solutions</a></h1>
                    <h4><img src="images/columns/plus.png"/>No fix no fee!</h4>
                    <h4><img src="images/columns/plus.png"/>Fix your tech onsite</h4>
                    <h4><img src="images/columns/plus.png"/>Flexible timeframes</h4>
                    <h4><img src="images/columns/plus.png"/>Competetive prices</h4>
                </div>
            </div>
        </div>

        <center><div class="contact-text">
        <p> Can we help?</p>
        <p><a href="contact.html">Contact us</a> now!</p>
        </div></center>
    </div>
</div>

    <footer class="mainfooter">
        <div class="top-row">
            <p class="short-text">Like this website? Thanks, we designed it ourselves.</p>
        </div>
        <div class="bottom-row">
            <p class="copyright"> Copyright &copy; 2015 Microfuse Solutions | ABN 82 681 365 983</p>
        </div>
    </footer>

</body>
</html>

我的CSS:

/*
    Business Website
    Author: Joel Male;
    Date Started: 20/06/2015;
    Date Finished: **;
*/
/*
    ////////////////////////////////////
    /////////// WEB STUFF //////////////
    ////////////////////////////////////
*/
@font-face {
    font-family: BebasFont;
    src: url("../fonts/bebas-font.TTF");
}

@font-face {
    font-family: Derive;
    src: url("../fonts/derive.TTF");
}
@font-face {
    font-family: RobotoBold;
    src: url("../fonts/Robot-Bold.TTF");
}
@font-face {
    font-family: RobotoRegular;
    src: url("../fonts/Robot-Regular.TTF");
}
/*
    ////////////////////////////////////
    ////// HANDLE DEFAULT MARKUPS //////
    ////////////////////////////////////
*/
body {
    background-color: #fff;
    color: #000305;
    font-size: 87.5%;
    font-family: Arial, 'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: left;
    padding: 0;
    margin: 0;
}

a { text-decoration: none }
a:link,
a:visited { }
a:hover,
a:active { }
/*
    ////////////////////////////////////
    //// HANDLE HEADER/CONTAINER ///////
    ////////////////////////////////////
*/
header {
    margin: 0 auto; /* Centers the page */
    width: 100%;
    clear: both; /* Nothing floats on the page */
}
.content {
    width: 70%;
    margin: 0 auto;
}
/*
    ////////////////////////////////////
    ////// HANDLE THE SEPARATORS ///////
    ////////////////////////////////////
*/
.mainheader .separator {
    margin-left: 15%;
    width: 70%;
    height: 2px;
    background-color: #CF5C3F;
}
.padding {
    width: 5%;
}
/*
    ////////////////////////////////////
    ////// HANDLE MAINHEADER HERE //////
    ////////////////////////////////////
*/
.mainheader {
    width: 100%;
    background-color: #022930;
    height: 450px;
}
.mainheader nav {
    padding-top: 2%;
    height: 40px;
}
.mainheader nav h1 {
    color: white;
    font-family: 'BebasFont';
    margin-top: -12px;
    float: left;
    padding-left: 15%;
    font-size: 40px;
}
.mainheader nav ul {
    float: right;
    list-style: none;
    margin: 0 auto;
    padding: 0 15% 0 0;
}
.mainheader nav ul li {
    font-family: 'Jura', sans-serif;
    font-weight: bold;
    position: relative;
    display: inline;
}
.mainheader nav ul li ul {
    position: absolute;
    left: 0;
    padding-left: 0px;
}
.mainheader nav a:link,
.mainheader nav a:visited {
    color: #FFF;
    display: inline-block;
    padding: 10px 20px;
    height: 20px;
}
.mainheader nav li:hover>a,
.mainheader nav a:active,
.mainheader nav .active a:link,
.mainheader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
}
/*
    ////////////////////////////////////
    //// HANDLE THE DROP DOWN MENUS ////
    ////////////////////////////////////
*/
.mainheader nav ul li:hover ul {
    display: block; /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
    padding-right: 0;
    position: absolute;
    top: 27px;
    left: 0;
}
.mainheader nav ul ul {
    display: none;
    position: absolute;
    background-color: #666;
}
.mainheader nav ul ul li {
    display: block;
    padding-right: 0;
    min-width: 190px;
}
.mainheader nav ul ul li:hover {
    background-color: #CF5C3F;
}
/*
    ////////////////////////////////////
    //// HANDLE THE SUBHEADER CONTENT //
    ////////////////////////////////////
*/
.mainheader .subheader {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
    display: flex;
}
.mainheader .subheader .left-content {
    padding-left: 15%;
    width: 25%;
    float: left;
}
.mainheader .subheader .left-content h1 {
    margin-top: 0;
    font-family: 'BebasFont';
    font-size: 60px;
    margin-bottom: 0;
    color: #FFF;
}
.mainheader .subheader .left-content h2 {
    margin-top: 0;
    font-family: 'BebasFont';
    font-size: 30px;
    margin-bottom: 0;
    color: #FFF;
}
.mainheader .subheader .left-content p {
    color: #FFF;
    font-family: 'Jura';
}
.mainheader .subheader .right-content {
    overflow: auto;
    width: 60%;
    height: 100%;
}
.mainheader .subheader .right-content img {
    float: right;
    width: 100%;
    padding-right: 26.5%;
    height: 300px;
}
/*
    ////////////////////////////////////
    //// HANDLE THE FIRST SECTION //////
    ////////////////////////////////////
*/
.firstsection {
    width: 100%;
    height: auto;
    padding: 10px 0 20px 0;
}
.firstsection h2 {
    font-family: 'BebasFont';
    font-weight: normal;
    font-size: 30px;
    margin: 0 0 20px 40px;
}
/*
    ////////////////////////////////////
    ///////////// TOP ROW //////////////
    ////////////////////////////////////
*/
.firstsection .top-row {
    width: 100%;
    height: 150px;
}
.firstsection .top-row .left-box-container {
    float: left;
    margin-left: 40px;
    width: 30%;
    height: 150px;
    background-color: #eaeaea;
    -webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    -moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    }
.firstsection .top-row .left-box-container .image img {
    float: left;
    width: 100px;
    height: 140px;
}
.firstsection .top-row .left-box-container .text {
    float: left;
    width: auto;
    margin-left: 10px;
}
.firstsection .top-row .left-box-container .text h1 {
    font-size: 1.5em;
    margin: 5px 0 0 0;
    margin-right: 50px;
}
.firstsection .top-row .left-box-container .text a  {
    color: black;
}
.firstsection .top-row .left-box-container .text a:hover  {
    text-decoration: underline;
}
.firstsection .top-row .left-box-container .text ul {
    list-style-type: none;
    margin: 3px 0 0 0;
}
.firstsection .top-row .left-box-container .text ul li {
    font-weight: bold;
    line-height: 1.8em;
}
.firstsection .top-row .left-box-container .text ul li img {
    width: 20px;
    height: 20px;
    float: left;
}

.firstsection .top-row .middle-box-container {
    float: left;
    margin-left: 40px;
    width: 30%;
    height: 150px;
    background-color: #eaeaea;
    -webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    -moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    }
.firstsection .top-row .middle-box-container .image img {
    float: left;
    width: 100px;
    height: 140px;
}
.firstsection .top-row .middle-box-container .text {
    float: right;
}
.firstsection .top-row .middle-box-container .text h1 {
    font-size: 22px;
    margin: 5px 0 0 0;
    margin-right: 100px;
}
.firstsection .top-row .middle-box-container .text a  {
    color: black;
}
.firstsection .top-row .middle-box-container .text a:hover  {
    text-decoration: underline;
}
.firstsection .top-row .middle-box-container .text h4 {
    margin: 3px 0 0 0;
    padding-left: 20px;
}
.firstsection .top-row .middle-box-container .text h4 img {
    width: 20px;
    height: 20px;
    float: left;
}

.firstsection .top-row .right-box-container {
    float: left;
    margin-left: 40px;
    width: 30%;
    height: 150px;
    background-color: #eaeaea;
    -webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    -moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    }
.firstsection .top-row .right-box-container .image img {
    float: left;
    width: 100px;
    height: 140px;
}
.firstsection .top-row .right-box-container .text {
    float: right;
}
.firstsection .top-row .right-box-container .text h1 {
    font-size: 22px;
    margin: 5px 0 0 0;
    padding-right: 50px;
}
.firstsection .top-row .right-box-container .text a  {
    color: black;
}
.firstsection .top-row .right-box-container .text a:hover  {
    text-decoration: underline;
}
.firstsection .top-row .right-box-container .text h4 {
    margin: 3px 0 0 0;
    padding-left: 20px;
}
.firstsection .top-row .right-box-container .text h4 img {
    width: 20px;
    height: 20px;
    float: left;
}
/*
    ////////////////////////////////////
    //////////// BOTTOM ROW ////////////
    ////////////////////////////////////
*/
.firstsection .bottom-row {
    margin: 90px 0 0 0;
    width: 100%;
    height: 150px;
}
.firstsection .bottom-row .left-box-container {
    float: left;
    margin-left: 40px;
    width: 350px;
    height: 150px;
    background-color: #eaeaea;
    -webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    -moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    }
.firstsection .bottom-row .left-box-container .image img {
    float: left;
    width: 100px;
    height: 140px;
}
.firstsection .bottom-row .left-box-container .text {
    float: right;
}
.firstsection .bottom-row .left-box-container .text h1 {
    font-size: 22px;
    margin: 5px 0 0 0;
    padding-right: 50px;
}
.firstsection .bottom-row .left-box-container .text a  {
    color: black;
}
.firstsection .bottom-row .left-box-container .text a:hover  {
    text-decoration: underline;
}
.firstsection .bottom-row .left-box-container .text h4 {
    margin: 3px 0 0 0;
    padding-left: 20px;
}
.firstsection .bottom-row .left-box-container .text h4 img {
    width: 20px;
    height: 20px;
    float: left;
}
.firstsection .bottom-row .middle-box-container {
    float: left;
    margin-left: 40px;
    width: 350px;
    height: 150px;
    background-color: #eaeaea;
    -webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    -moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    }
.firstsection .bottom-row .middle-box-container .image img {
    float: left;
    width: 100px;
    height: 140px;
}
.firstsection .bottom-row .middle-box-container .text {
    float: right;
}
.firstsection .bottom-row .middle-box-container .text h1 {
    font-size: 22px;
    margin: 5px 0 0 0;
    padding-right: 50px;
}
.firstsection .bottom-row .middle-box-container .text a  {
    color: black;
}
.firstsection .bottom-row .middle-box-container .text a:hover  {
    text-decoration: underline;
}
.firstsection .bottom-row .middle-box-container .text h4 {
    margin: 3px 0 0 0;
    padding-left: 20px;
}
.firstsection .bottom-row .middle-box-container .text h4 img {
    width: 20px;
    height: 20px;
    float: left;
}
.firstsection .bottom-row .right-box-container {
    float: left;
    margin-left: 40px;
    width: 350px;
    height: 150px;
    background-color: #eaeaea;
    -webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    -moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
    }
.firstsection .bottom-row .right-box-container .image img {
    float: left;
    width: 100px;
    height: 140px;
}
.firstsection .bottom-row .right-box-container .text {
    float: right;
}
.firstsection .bottom-row .right-box-container .text h1 {
    font-size: 22px;
    margin: 5px 0 0 0;
    padding-right: 50px;
}
.firstsection .bottom-row .right-box-container .text a  {
    color: black;
}
.firstsection .bottom-row .right-box-container .text a:hover  {
    text-decoration: underline;
}
.firstsection .bottom-row .right-box-container .text h4 {
    margin: 3px 0 0 0;
    padding-left: 20px;
}
.firstsection .bottom-row .right-box-container .text h4 img {
    width: 20px;
    height: 20px;
    float: left;
}
/*
    ////////////////////////////////////
    /////////// CONTACT TEXT ///////////
    ////////////////////////////////////
*/
.firstsection .contact-text {
    margin: 15px 0 0 0;
}
.firstsection .contact-text p {
    margin: 0;
    font-size: 40px;
    font-family: 'Jura';
}
.firstsection .contact-text p a {
    font-size: 40px;
    font-family: 'Jura';
}
.firstsection .contact-text p a:hover {
    text-decoration: underline;
    color: #CF5C3F;
}
/*
    ////////////////////////////////////
    //////// HANDLE THE FOOTER /////////
    ////////////////////////////////////
*/
.mainfooter {
    width: 100%;
    height: 200px;
    float: left;
    background-color: #022930;
    color: white;
}
.mainfooter a { color: #FFF }
.mainfooter .top-row {
    width: 100%;
    height: 50%;
}
.mainfooter .bottom-row {
    width: auto;
    height: 50%;
}
.mainfooter .top-row h1 {
    padding-top: 1%;
    padding-bottom: 3%;
}
.mainfooter p {
    font-family: 'BebasFont';
}
.mainfooter .top-row .short-text {
    padding-left: 15%;
    float: left;
    margin: 5px 0 0 0;
}
.mainfooter .bottom-row .copyright {
    padding-left: 15%;
    margin: 5px 0 0 0;
}
/*
    ////////////////////////////////////
    /// HANDLE PHONE/SMALLER SCREENS ///
    ////////////////////////////////////
*/
@media only screen and (min-width: 150px) and (max-width: 600px) { 
    .body {
        width: 90%;
        font-size: 95%;
    }
    .mainheader img { width: 30% }
    .mainheader nav {
        background: #666;
        height: 200px;
        line-height: 30px;
        margin-bottom: 0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    .mainheader nav ul {
        list-style: none;
        margin: 0 auto;
        padding-left: 0;
    }
    .mainheader nav li {
        width: 100%;
        margin-left: 0 auto;
    }
    .mainheader nav a:link,
    .mainheader nav a:visited {
        color: #FFF;
        display: block;
        height: 30px;
        padding: 5px 0;
        text-decoration: none;
    }
    .mainheader nav a:active,
    .mainheader nav .active a:link,
    .mainheader nav .active a:visited {
        background: #CF5C3F;
        color: #fff;
        text-shadow: none !important;
    }
    .mainheader nav li a {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    .content {
        width: 100%;
        float: left;
        margin-top: 2%;
    }
    .top-content {
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 3% 5%;
        margin-top: 2%;
    }
    .bottom-content {
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 3% 5%;
        margin-top: 2px;
    }
}

让这 6 个框至少响应平板电脑 View (同时保持相同的布局)，然后一次垂直 1 个框用于手机，这几乎是我几乎完成之前必须处理的最后一个问题网站。

我还注意到(正如您在第二个框中看到的那样)如果我将标题名称更改为任何内容，它会搞砸框的布局。

无论如何，请帮忙:(我尽力了。

最佳答案

不要为盒子使用 float ，使用 CSS table 或 flexbox:

示例 HTML

* { margin:0; padding:0; }

/* css table */
.box { display: table; border: 1px solid #000; background: #ccc;}
.box>div { display: table-cell; }
.box-img { width: 150px; background: url(http://www.fillmurray.com/150/150) center no-repeat; }
.box-text { padding: 10px; }

/* flexbox */
.flexbox-box { display: flex; align-items: center; border: 1px solid #000; background: #ccc;}
.flexbox-box-img { flex: 0 0 150px; height: 150px; background: url(http://www.fillmurray.com/150/150) center no-repeat; }
.flexbox-box-text { flex: 1 1 auto; padding: 10px;}
<div class="box">
  <div class="box-img">
  </div>
  <div class="box-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et elit id justo porta interdum. Cras elementum, arcu eu pulvinar maximus, massa ipsum gravida risus, eget ultricies libero augue sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget pharetra dolor. Quisque lobortis porttitor molestie. Aliquam non sagittis lorem. Proin faucibus magna    
  </div>
</div>

<div class="flexbox-box">
  <div class="flexbox-box-img">
  </div>
  <div class="flexbox-box-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et elit id justo porta interdum. Cras elementum, arcu eu pulvinar maximus, massa ipsum gravida risus, eget ultricies libero augue sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget pharetra dolor. Quisque lobortis porttitor molestie. Aliquam non sagittis lorem. Proin faucibus magna      
  </div>
</div>

关于html - 响应框和文本不对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31114613/

上一篇：CSS缩放效果背景悬停

下一篇：javascript - 居中第二个 float : float left inside the div tag

相关文章：

html - 这个 CSS 语法是什么意思？

css - Bootstrap 行定位

Javascript onMouseover 交换图像

html - 字体颜色不符合 textarea 和选择框的 css 中指定的样式

JavaScript 类型模块不执行

javascript - jQuery:临时切换Class/addClass，removeClass？

html - CSS 虚线边框

javascript - 减少水平条形图 chartJS 中刻度线之间的空间

html - 语义分割和旁白广告标题的影响

css - 响应问题 - div 类 ="row"和部分标题

©2024 IT工具网  联系我们