响应CSS /内联div [英] Responsive CSS / Inline divs

问题描述

我试图使用CSS在页面上放置 100％width div ，然后在 div 2 div s inline 所有 div 上的code> 10px padding ，然后随着页面变小使两个 50％ div 更改为 100％

I am trying to use CSS to put a 100% width div across the page and then under that div 2 divs inline that are 50% each each 10px padding on all the divs and then as the page gets smaller make the two 50% divs change to 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/

here is a fiddle also: http://jsfiddle.net/dd6Wb/

推荐答案

当你使用<$时，你不需要 display：inline; c $ c> float：left; 。

1st of all you don't need display: inline; when you are using float: left;. Secondly, when you are going for responsive designs, always make sure you use the snippet below

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

上述代码段会做什么？好吧，如果你知道盒子模型，它将只是表现与此相反。此外，您不必清除浮动元素，因此您可以使用以下代码段在父元素上保存浮动元素。

What will the above snippet do? Well, if you know the box model, it will just behave the opposite of that. Also, you care not clearing your floated elements, so you can use the below snippet to be used on parent element holding floating elements

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

此外，最后但不是最少，您需要使用 @media 查询并以定义的分辨率将您的 div 宽度更改为 100％块 @media ，这被称为断点。

Also, last but not the least, you need to use @media queries and change your div width's to 100% in a defined resolution block of @media, this is known as break points.

演示 （调整窗口大小以查看效果）

Demo (Resize the window to see the effect)

这篇关于响应CSS /内联div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！