Responsive CSS / Inline divs

问题

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%

here is what i have so far:

<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>

whats the best way to do this?

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

回答1:

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;
}

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)

回答2:

You can use a media query for that:

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

Demo

Try before buy

As a note: The border may make the element to big. Due to rounding issues in some browers like Safari the design may break on some window sizes. See Mr. Alien's answer for a solution on that.

回答3:

Your problem is that the border is also taking place from the 100%.

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

This is one possible solution: http://jsfiddle.net/dd6Wb/2/

来源：https://stackoverflow.com/questions/18229169/responsive-css-inline-divs

标签

html

css

css3

responsive-design

css-float