Szerokość strony

pytanie zadane 13 sierpnia 2016 w HTML i CSS przez niezalogowany

Witam.

Mam problem z szerokością strony, chcę ustawić 3 bloki obok siebie, wraz z marginesem (wiadomo, trzeba odliczyć od szerokości), ale ile powinno się ustawić tej szerokości, żeby nie pojawił się scrollbar?

komentarz 13 sierpnia 2016 przez Vento Pasjonat (17,120 p.)

Poczytaj na temat scrollbara tutaj:

https://css-tricks.com/almanac/properties/o/overflow/

1 odpowiedź

odpowiedź 13 sierpnia 2016 przez niezalogowany
wybrane 19 sierpnia 2016

Najlepsza

100% / 3 - margin

komentarz 13 sierpnia 2016 przez niezalogowany

margin w % tak ?. Tak to wychodzi 33.3333 xd

komentarz 13 sierpnia 2016 przez niezalogowany

A jak inaczej chcesz zapisać w dziesiętnym 100/3?
margin w px
użyj calc

komentarz 13 sierpnia 2016 przez niezalogowany

Dzięki za pomoc, bardzo fajny trik ;D

Tylko spójrz na mój kod:

HTML

<!DOCTYPE html>
<html lang="pl-PL">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>WebPear</title>
    <meta name="description" content="Daj się zareklamować firmie">
    <meta name="keywords" content="web, www, buy, ad">
    <link rel="stylesheet" href="styles/style.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
    <body>
        <header>
        <h1>Insignis</h1>
        <nav>
        <ul>
        <li>About</li>
        <li>Offer</li>
        <li>Price</li>
        <li>Contact</li>
        </ul>
        </nav>
        </header>
        
        <article>
        <img width="100%" height="400" src="images/pexels.jpeg"/>
        
        <div class="container"></div>
        <div class="block">O nasO nas<</div>
        <div class="block">O nasO nas<</div>
        <div class="block">O nasO nas<</div>
        <div class="block">O nasO nas<</div>
            </article>
       
    </body>

</html>

CSS



body {
     margin: 0;
     padding: 0;
     background-color: #34495e;
}

h1 {
    font-family: 'Roboto Condensed', sans-serif;
    float: left;
    color: #ffffff;
    border: 5px solid #ffffff;
    margin-left: 15px;
   
    padding: 5px;
    
}
.block {
        width: calc(25% - 80px);
        height: 200px;
        margin: 10px;
        font-family: 'Roboto Condensed', sans-serif;
        color: #ffffff;
        display: inline-block;
        background-color: salmon;
        display: inline-block;    
}
.container {
         text-align: center;
}

.inline {
    vertical-align: super;
    color: salmon;
    text-align: center;
}

li {
    font-family: 'Lato', sans-serif;
    font-size: 25px;
    padding: 10px;
    float: left;
    list-style: none;
    
    
    
    color: #ffffff;
}
li:hover {
    border-bottom: 2px solid #e74c3c;
    cursor: pointer;
}

header {
    clear: both;
    width: 100%;
    height: 100px;
    background-color: #000000;
    
    
}
nav
{
    float: right;
    margin-right: 20px;
    
}
h1:hover
{
    cursor: pointer;
    border: 5px solid  #e74c3c;

}

Czemu te bloki nie są calkowicie na środku, a po prawej jest puste miejsce ?