Как я могу заставить мою колонку оставаться в строке?

Здесь есть 2 проблемы: мой первый столбец расположен выше, чем другие 2, во-вторых, я хочу иметь возможность добавлять пространство в 20 пикселей как слева, так и справа от веб-страницы, но хочу, чтобы между средним столбцом и столбцами оставалось только 10 пикселей. слева и справа от него. Для этого мне нужно было бы создать 3 отдельных класса столбцов вместо 1 у меня в настоящее время?

Сайт в настоящее время

.column {
display: inline !important;
float: left;
width: 33.33%;
padding: 10px;
margin-top: 70px;
box-sizing: border-box;
}
1

1 ответ

Чтобы добавить пространство в 20px для левой и правой сторон столбцов переноса веб-страницы в div-упаковщик (здесь я добавил column-container) и отдай padding: 0 10px; и у ваших столбцов уже есть отступы 10px, так что теперь ваша веб-страница имеет отступы 20px с обеих сторон.
Редактировать:
добавлять <div class="clear"></div> после header и применить CSS .clear { clear: both; }

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog,
div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form,
header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark,
menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s,
samp, section, small, span, strike, strong, sub, summary, sup, table, tbody,
td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 100%;
}

body, html {
    background-color: white

}

article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
    display: block
}

body {
      max-width: 100%;
    overflow-x: hidden;
    height: 100%;
 width: 100%;
    text-align: left;
}

.header2 {
    display: inline;
    flex-wrap: wrap;
    justify-content: left !important;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    text-align: left;
    float: left;

}

.header {
    display: flex;
    flex-wrap: wrap;
    justify-content: right !important;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    text-align: right;
    float: right;

}



p {
  font-family: Helvetica, serif;
    font-size: 30px;
    font-weight: 100;
    display: inline;
    margin-top: 40px;



-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

    word-wrap: break-word;
}



.column {
  display: inline !important;
    float: left;
  width: 33.33%;
    padding: 10px;
    margin-top: 70px;
  box-sizing: border-box;

}

h1 {
  font-family: Arial, sans-serif;
    font-size: 48px;
    font-weight: 100;
    display: inline;
       padding: 15px;
    margin-top: 10px ;
    margin-bottom: 20px;
    word-break: break-word;
}

h2 {
  font-family: Arial, sans-serif;
    font-size: 48px;
    font-weight: 100;
    display: inline;
       padding: 15px;
  box-sizing: border-box;
    word-break: break-word;
    
}

h3 {
  font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 100;
        padding: 15px;
  box-sizing: border-box;
    display: inline;
}

h4 {
  font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 100;
        padding: 15px;
  box-sizing: border-box;
    display: inline;
}

h5 {
  font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 100;
        padding: 15px;
  box-sizing: border-box;
    display: inline;
}

a { color:black} /* Globally */

/* Each state */

a:visited { text-decoration: none !important; color:black; }
a:hover { text-decoration: none !important; color:black; }
a:hover, a:active { text-decoration: none  !important; color:black }
}

div {
    text-decoration: none  !important;
}

.footer{
    padding-top: 20px;
    margin-top:10px;
    bottom: 0px;
    position: relative;
}

.footer1 a{
    border: 2px solid #000;
    border-color: black;
    border-width: 0 0 0px;
}

.footer2 {
    bottom: 0px !important;
    right: 0px;
    float: right;
    position: relative;
        display: inline !important;
}

.contentwrapper{
    position: relative;
    clear: both;
margin:0 auto;
width:98vw;

}

.main-carousel{
    position: relative;
    height: 100%;
    padding-top: 70px;
}

.carousel-cell{
    width: 100%;
    position: relative;
}

.carousel-cell img{
    display: block;
    height: 100%;
}


.main-carousel img {
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: relative;
}


html, body{
    height: 100%
}

/* Barber CSS */

.link{
transition:.2s all;
cursor: pointer;
}

.link:hover{
text-decoration:underline;
    
}

a{
text-decoration: none;
}

.flickity-prev-next-button.previous {
    left: 10px;
    display: block;
    opacity: 1!important;
  }

.flickity-prev-next-button.next{
  right: 10px;
  display: block;
  opacity: 1!important;
  }

.flickity-button{
  background:none!important;
}
.flickity-prev-next-button .arrow {
    fill: white!important;
}

.indent{
  text-indent: 70px;
  word-break: break-word;
}

.header-item{
padding:px;
}

@media(max-width:700px){

  .column {
    display: inline !important;
      float: left;
    width: 90%;
      padding: 15px;
    box-sizing: border-box;
    
  }

  .header div h1{

    font-size:16px;
    max-width:100%;
  }

}

li {
 font-family: helvetica, sans-serif;
    font-size: 30px;
    font-weight: 100;
    display: inline;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding-top: 70px
}

img {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 20px;
    display: block;
    padding-right: 20px !important;
}

.column-container {
  padding: 0 10px;
}
.clear {
  clear: both;
}
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="en"/>

    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="stylesheet" type="text/css" href="flickity.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flickity.min.css">


<!-- You were just missing JQuery. This is a very important javascript library you will need for most projects. If you have JS problems in future
start by including the link below -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <title>ALEX BURGER</title>
</head>


    <body>

            <!-- JS -->
     <script type="text/javascript" src="jquery-2.2.2.min.js"></script>
    <script src="flickity.pkgd.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
    <script src="https://unpkg.com/[email protected]/dist/flickity.pkgd.min.js"></script>

     <div class="header2">
         <div class ="header-item">
              <a href="index.html"><h1 class ="link">ALEX BURGER</h1></a>
         
             <div class ="header-item">      
             <a href=""><h2>[email protected]</h2></a>
        
        
    <div class="header">
      <div class ="header-item">
       
      </div>
      <div class ="header-item">
       <a href="Grafik%20Design.html"><h3 class ="link">GRAFIK DESIGN</h3></a>
          </div>
       <div class ="header-item">
      <a href="Photography.html"><h4 class ="link">PHOTOGRAPHY</h4></a>
           </div>
       <div class ="header-item">
       <a href="fonts.html"><h5 class ="link">FONTS (1)</h5></a>
           </div>
       </div>
<div class="clear"></div>
<div class="column-container">
<div class="column"><p>ALEX BURGER<br>
    I am a Graphic Designer/ Photographer with a strong focus on typography and editorial design.<br> I am interested in how design and photography can be combined to communicate ideas around social sciences; especially gender and masculinity. As well as creating a space that aims to be all inclusive.
        </p>
    </div>

<div class="column"><p>EDUCATION<br>
    2014-18 Massey University
          Wellington, New Zealand.
          Bachelor of Design, Honours
          First Class. Visual Communication Design.<br></p>
       <div class ="indent">
        <p>WORK EXPERIENCE<br>
            </div>

            <p>GS1 New Zealand: Geromino Team<br>
                Positions: Photographer<br></p>
            <div class ="indent"><p>Photo Editor<br></p></div>

        </div>

<div class="column"><p>CONTACT<br>
    Location: Currently based in Berlin.
           Available for freelance work.<br>

         <div class ="indent">
        <p>[email protected]<br></p>

            </div>

        <p>(+49) 0152 28165191<br></p>


        <div class ="indent">
            <p>TECHNICAL<br>
                </div>
            <p>Photoshop. Indesign. Illustrator.
                Editorial &amp; Book Design.
                Studio &amp; Product Photography. Exhibition Design</p>

            <div class ="indent">
            <p>
                HTML &amp; CSS.
                </p></div>

</div>
               </div>


        <div class="contentwrapper">


         <div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": true, "autoPlay": true}'>

            <div class="carousel-cell">
                <img src ="GenerationAnxiety.01.jpg"></div>

             <div class="carousel-cell">
                <img src ="GenerationAnxiety.02.jpg"></div>

            <div class="carousel-cell">
                <img src ="GenerationAnxiety.03.jpg"></div>

            <div class="carousel-cell">
                <img src ="GenerationAnxiety.04.jpg"></div>

            <div class="carousel-cell">
                <img src ="GenerationAnxiety.05.jpg"></div>





        </div>




        <div class="footer">
            <div class="footer1">

        <p>&copy; Alex Burger. All rights reserved<br>Further information can be requested through email.</p>

                <div class="footer2">
                   
                <a href="Grafik%20Design.html"> <p>[email protected]</p></a>
            </div>
           
            
            
           
</body>

</html>

0
Другие вопросы по тегам