столбцы не в том же положении - PullRequest
Новая
       46

столбцы не в том же положении

0 голосов
/ 01 февраля 2019

Я добавляю меню в верхней части моей страницы с 5 столбцами.Один из столбцов - это изображение, а 4 - абзацы.Столбцы с изображением выше, чем мои абзацы-столбцы.

У меня есть столбец с 5 столбцами равной ширины.Я указал свойство height как для своего изображения, так и для абзацев. Я указал верхнюю позицию моих элементов Div, но это не решает проблему.Что я должен добавить к своему коду? 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    * {
      box-sizing: border-box;
    }

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

    [class*="col-"] {
      float: left;
      
    }

    .col-1 {width: 10%;}
    .col-2 {width: 20%;}
    .col-3 {width: 30%;}
    .col-4 {width: 40%;}
    .col-5 {width: 50%;}
    .col-6 {width: 60%;}
    .col-7 {width: 70%;}
    .col-8 {width: 80%;}
    .col-9 {width: 90%;}
    .col-10 {width: 100%;}

    div.banner {
    width:92%;
    max-height:40px;
    font-size:1.5vw;
    color: white;
    background-color: white;
    position: relative;
    top: 0px;
    }
    <div class="row">

    	<div class="col-2 menu">
    	<div class="banner">
    	
    	<img src=image.jpg" style="width:92%;max-height:40px;" />
    	
    	</div>
    	</div>
    	
    	



      <div class="col-2 menu">
      <div class="banner">
     <a href="home.html">
    	
    	<p> Home </p>
    	
    	</a>
      </div>
      </div>

      <div class="col-2">
       	
    	<div class="banner">
     <a href="uploaden.html">
    	
    	<p> Uploaden </p>
    	
    	</a>
      </div>
      </div>
      
      <div class="col-2 menu">
      <div class="banner">
         <a href="faq.html">
    	<p> FAQ </p>
    	</a>
      </div>
      </div>

      <div class="col-2">
      <div class="banner">
        <a href="contact.html">
    	
    	<p> Contact </p>
    	
    	</a>
      </div>
     <br> 
     <br> 
    <br> 
     </div>
* {box-sizing: border-box;} .row :: after {content: "";ясно: оба;дисплей: стол;} [class * = "col-"] {float: left;} .col-1 {ширина: 10%;} .col-2 {ширина: 20%;} .col-3 {ширина: 30%;} .col-4 {ширина: 40%;} .col-5 {ширина: 50%;} .col-6 {ширина: 60%;} .col-7 {ширина: 70%;} .col-8 {ширина: 80%;} .col-9 {ширина: 90%;}.col-10 {ширина: 100%;} div.banner {ширина: 92%;макс высота: 40px;Размер шрифта: 1.5vw;белый цвет;цвет фона: белый;положение: относительное;верх: 0px;}image

Дом

Загрузка

FAQ

Контакт




...