响应式 CSS / 内联 div

Posted 2023-03-06

【中文标题】响应式 CSS / 内联 div

【英文标题】：Responsive CSS / Inline divs

【发布时间】：2013-08-16 06:06:10

【问题描述】：

我正在尝试使用 CSS 在页面上放置一个 100% width div，然后在 div 2 divs inline 下放置 50% 每个 10px padding 在所有 divs然后随着页面变小，将两个 50% divs 更改为 100%

这是我目前所拥有的：

<style type="text/css">
body,html 
    margin:0;
    padding:0;

.outer 
    width:100%;

.topblock 
    width:100%;
    padding:10px;
    border:1px solid black;

.block1 
    width:48%;
    padding:1%;
    float:left;
    display:inline;
    border:1px solid black;

.block2 
    width:48%;
    padding:1%;
    float:left;
    display:inline;
    border:1px solid black;

</style>

HTML：

<div class="outer">

<div class="topblock">
tickets
</div>

<div class="block1">
service orders
</div>

<div class="block2">
tickets 2
</div>

</div>

最好的方法是什么？

这里还有一个小提琴：http://jsfiddle.net/dd6Wb/

【参考方案1】：

首先，当您使用float: left; 时，您不需要display: inline;。其次，当您进行响应式设计时，请务必使用下面的 sn-p

* 
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

上面的sn-p会做什么？好吧，如果你知道盒子模型，它的行为就会与此相反。此外，您不在乎清除浮动元素，因此您可以使用下面的 sn-p 用于持有浮动元素的父元素

.clear:after 
   content: "";
   display: table;
   clear: both;

此外，最后但并非最不重要的一点是，您需要使用@media 查询并将div 的宽度更改为100% 在定义的@media 分辨率块中，这称为断点。

Demo（调整窗口大小看效果）

【参考方案2】：

您可以为此使用媒体查询：

@media screen and (max-width: 768px) 
   .block1, .block2 
        width: 100%;
    

演示

Try before buy

注意：边框可能会使元素变大。由于某些浏览器（如 Safari）的舍入问题，设计可能会在某些窗口大小上中断。请参阅Mr. Alien's answer 以获取解决方案。

【参考方案3】：

你的问题是边界也是从 100% 开始的。

making 48% width with 1% padding and 1 px border makes 50% + 1px.

这是一种可能的解决方案： http://jsfiddle.net/dd6Wb/2/