Responsive CSS / Inline divs

Je suis en train d'utiliser le CSS pour mettre un 100% width div en travers de la page et puis sous celui div 2 divs inline qui sont 50% chaque chaque 10px padding sur tous les divs et alors que la page est plus petite que les deux 50% divs changement de 100%

voici ce que j'ai à ce jour:

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

quel est le meilleur moyen pour ce faire?

ici est un violon aussi: http://jsfiddle.net/dd6Wb/

OriginalL'auteur | 2013-08-14

  1. 8

    1er de tous, vous n'avez pas besoin display: inline; lorsque vous utilisez float: left;. Deuxièmement, quand vous allez pour sensible conceptions, assurez-vous de toujours utiliser l'extrait de code ci-dessous

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

    Quel sera l'extrait ci-dessus? Eh bien, si vous connaissez le modèle de boîte, il suffit de se comporter à l'opposé de cela. Aussi, vous soin de ne pas vider votre flottait éléments, de sorte que vous pouvez utiliser l'extrait de code ci-dessous pour être utilisé sur l'élément parent détenant des éléments flottants

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

    Aussi, dernier point mais non le moindre, vous devez utiliser @media requêtes et de changer votre div la largeur de 100% dans une résolution prédéfinie bloc de @media, connus sous le nom des points de rupture.

    Démo (Redimensionner la fenêtre pour voir l'effet)

    +1 pour la box-sizing. Beaucoup de meilleur exemple de comment le faire.

    OriginalL'auteur Mr. Alien

  2. 0

    Vous pouvez utiliser une requête de média:

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

    Démo

    Essayez avant d'acheter

    Comme une note: La frontière peut rendre l'élément de gros. En raison de l'arrondissement des problèmes dans certains browers comme Safari la conception peuvent se briser sur certaines tailles de fenêtre. Voir M. l'Étranger répondre pour une solution sur ce point.

    OriginalL'auteur insertusernamehere

  3. 0

    Votre problème est que la frontière est aussi lieu de 100%.

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

    C'est une solution possible:
    http://jsfiddle.net/dd6Wb/2/

    OriginalL'auteur Itay