Question

我的问题是我正在尝试制作响应式模板。我现在正在制作标题。

首先，我将在此处发布一个代码，以便了解您的想法。

<div id="header_box">
  <div class="box">
  Content of box / Img
  </div>
  <div class="box">
  Content of box / Img
  </div>
  <div class="box">
  Content of box / Img
  </div>
</div>

“header_box”是100％宽度，认为“box”就像是40％。

这意味着，因为有3个“盒子”它会产生120％，是否有一种方式让“盒子”宽度自动调整大小，达到30％，如果我添加另一个“盒子”它会使20％或类似的东西？

感谢。

Answer 1

首先，您的ID应该是唯一的，因此在您给出的示例中，最好使用类（即$admquery = "SELECT `id`, `Username`, `IP`, `SecureIP`, `AdminLevel`, `Helper`, `referral_id` FROM `accounts` WHERE `Username` = '$myusername'"; $admincheckquery = mysql_query($admquery); if (!$admincheckquery) { echo $admquery; die('Invalid query: ' . mysql_error()); } $adminchk = mysql_fetch_array($admincheckquery);）

您可以在CSS中使用flex和inline-flex根据屏幕宽度调整DIV的大小。我在这里附上了一个基本示例：http://jsfiddle.net/18e3cxd1/

class="box"

此链接为使用flexbox提供了一些非常好的指导：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.header_box{
    display: table;
    width: 100%;
    border-spacing: 5px;
}
.box{
    display: table-cell;
    vertical-align: top;
    padding: 15px;
    border: 1px solid #f00;
}

@media screen and (max-width: 400px) {
    
    .box{
        display: table-caption;
    }    
    
}

<div class="header_box">
    <div class="box">
        <p>Content of box / Img</p>
    </div>
    <div class="box">
        <p>Content of box / Img</p>
    </div>
     <div class="box">
        <p>Content of box / Img</p>
    </div>
</div>

Div调整为div％

2 个答案: