亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在 iPhone 上正確調整 <div> 寬度？

如何在 iPhone 上正確調整 <div> 寬度？

慕工程0101907 2024-01-03 14:43:00
我正在顯示這些默認寬度的 div每次我嘗試通過以下方式使這些 div 變大：<center><h4>CONTACTO</h4></center><div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">    <div></div></div><br><div style="height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">    <div></div></div><br><div style="height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">    <div></div></div><br><div style="height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">    <div></div></div></section></center>其中之一變寬，但它沒有居中，即使我使用“center”標簽也是如此。我得到：我想讓這些 div 的大小與第一個 div 的大小相同，但居中。我嘗試使用align=“center”，但它不起作用。提前致謝。
查看完整描述

2 回答

?
青春有我

TA貢獻1784條經驗 獲得超8個贊

如果您正在尋找移動設備和桌面設備上的完全響應式屏幕，我會使用 CSS Flex 框和/或 Bootstrap 之類的東西。它們可以幫助確保容器對任何屏幕寬度的響應能力。


.wrapper {

    margin: 10px;

    padding: 10px;

    min-height: 100%;

}


h4 {

    text-align: center;

}


.shell-container {

    width: 600px;

    height: 70px;

    opacity: 0.3;

    background: lightGrey;

    border-radius: 6px;

    display: flex;

    flex-direction: column;

    margin-left: auto;

    margin-right: auto;

    width: 80%;

}

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>El</title>

        <!-- CSS -->

        <link rel="stylesheet" href="style.css">

        <!-- Bootstrap -->

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

    </head>

    <body>

        <div class="wrapper fluid-container">

            <h4>CONTACTO</h4>

            <div class="shell-container">

                <div></div>

            </div>

            <br>

            <div class="shell-container">

                <div></div>

            </div>

            <br>

            <div class="shell-container">

                <div></div>

            </div>

            <br>

            <div class="shell-container">

                <div></div>

            </div>

        <div>

    </body>

</html>


查看完整回答
反對 回復 2024-01-03
?
BIG陽

TA貢獻1859條經驗 獲得超6個贊

您的標簽放錯了位置。就是這個：


<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

    <link rel="stylesheet" href="style.css">

    <title>Title</title>

</head>


<body>

    <center>

        <h4>CONTACTO</h4>

        <div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">

            <div></div>

        </div>

        <br>

        <div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">

            <div></div>

        </div>

        <br>

        <div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">

            <div></div>

        </div>

        <br>

        <div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">

            <div></div>

        </div>

        <br>

        <div style="width:600px; height: 70px; opacity: 0.3; background: lightGrey; border-radius: 6px;" class="shell container">

            <div></div>

        </div>

        <br> </section>

    </center>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

</body>


</html>


查看完整回答
反對 回復 2024-01-03
  • 2 回答
  • 0 關注
  • 162 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號