Problemen met display:inline

Door Onbekende gebruiker op 16-08-2015 17:39

1.556 views

Ik heb een probleem met mijn display inline css. Ik wil graag de foto's naast elkaar zetten. Dit is mijn code:

CSS

.nieuws {
            width:1200px;
            height:800px;
            margin:10px;
            float:left;
            color:black;
           box-shadow: 1px 1px 1px #888888;

          }

          .block {
            width:310px;
            height:220px;
            display:inline;
            float:left;
            margin:5px;
            padding:5px;
          }

          .image {
            display:inline;
            float:left;
          }

             h2 {
              position: absolute;
              top:100px;
              margin:5px;
              width:300;
              color:black;
              
              background:red;
             }

En dit mijn PHP code:


<p><div class="block"><div class="image"><img class="thumbnail" src="../admin/images/<?php echo $article['article_photo'];?>" width="306"   /> <h2><a href="article.php?id=<?php echo $article['article_id'];?>">
<?php echo $article['article_title']; ?>
</h2>
<p>

</a>

Zo ziet het er nu uit. Ik wil de foto's naast elkaar hebben

Kan iemand mij helpen?

Groetjes
Julian

- SanThe -

16-08-2015 17:46

width="306" en width:300; mist daar geen px?

Je block is 310 breed en je wilt daar images naast elkaar van 306 breed.
Dat gaat niet lijkt mij.

Daan Slagter

16-08-2015 17:54

Heb je misschien een link naar een online voorbeeld want dit is volgens mij niet alle HTML code

Onbekende gebruiker

16-08-2015 18:19

De website is: http://kickradio.tk/newsite. Ik ben er nog mee bezig. Het nieuws block is het grote witte vlak. De foto's zijn 306 breed. Nieuws is 1200px breed, op dat vlak moet de block komen. Block wordt herhaald. Voor ieder nieuw nieuws komt er een nieuw block bij. Een soort van loop.

Frank Nietbelangrijk

16-08-2015 18:48 gewijzigd op 16-08-2015 18:49

Waarom niet gewoon een float: left?

http://codepen.io/anon/pen/doEYaw


<div id="container">
  <div class="image">
    Image 1
  </div>
  <div class="image">
    Image 2
  </div>
  <div class="image">
    Image 3
  </div>
  <div class="image">
    Image 4
  </div>
  <div class="image">
    Image 5
  </div>
  <div class="clear"></div>
</div>


#container {
  width: 1200px;
  margin: 0 auto;
  padding: 25px;
  background-color: #AAA;
}

.image {
  float: left;
  width: 304px;
  height: 228px;
  border: 10px solid white;
  margin: 0 10px 10px 0;
  background-color: yellow;
}

.clear {
  clear: both;
}

Onbekende gebruiker

16-08-2015 22:10

Het is gelukt dank je wel! Het werkt.

Reageren

Inloggen om te reageren