Member 14058015 Ответов: 1

Как сделать макет изображения 4x1 с помощью HTML и CSS?

я новичок в программировании и весь день искал этот вопрос, но, похоже, не могу найти ответ. Как разделить 4 картинки в ряд? Точно так же, но с четырьмя картинками:


https://codepen.io/bradtraversy/pen/dJzzdB


пример:

(Изображение)...........(изображение)............(изображение)............(изображение)

(кнопка)...........(Кнопка)..........(кнопка)...........(кнопка)

Спасибо :)

Что я уже пробовал:




<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Meg</title>
    <link rel="stylesheet" href="masterp2.css">
  </head>
  <body>
    <div class="container">


      <div class="split left">
        <button type="button" name="btnl">Mer info</button>
      </div>


      <div class="split right">
        <button type="button" name="btnr">Mer info</button>
      </div>


      <div class="split rightmiddle">
        <button type="button" name="btnm">Mer info</button>
      </div>
    </div>

    <div class="split leftmiddle">
      <button type="button" name="btnlm">Mer info</button>
    </div>
  </div>

  </body>
</html>



html, body{
  margin: 0;
  padding: 0;
  
}

button{
  background: none;
  color: #ccc;
  width: 150px;
  height: 80px;
  border: 1px solid #338033;
  font-size: 18px;
  border-radius: 4px;
  transition: .6s;
  overflow: hidden;
}

button:hover{
  background: #338033;
  cursor: pointer;
  outline: none;

}

.split.left button{
  top: 50%;
  position: absolute;
  left: 25%;
  transform: translate(-15%, -50%);
}


.split.right button{
  top: 50%;
  position: absolute;
  right: 25%;
  transform: translate(-15%, -50%);
}

.split.middle button{
  top: 50%;
  position: absolute;
  right: 25%;
  transform: translate(-25%, -50%);
}

.split.leftmiddle button{
  top: 50%;
  position: absolute;
  left: 25%;

}


.split{
  width: 25%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  overflow-x: hidden; 
}

.split.left{
  left: 0;
  background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
  background-size: cover;
}

.split.right{
  right: 0;
  background: url('https://images.pexels.com/photos/860564/pexels-photo-860564.jpeg?auto=compress&cs=tinysrgb&h=650&w=940')  center no-repeat;
  background-size: cover;
}

.split.middle{
  right: 30;
  background: url('https://images.pexels.com/photos/1133957/pexels-photo-1133957.jpeg?auto=compress&cs=tinysrgb&h=650&w=940') center center no-repeat;
  background-size: cover;
}

.split.leftmiddle{
  left: 25;
  background: url('https://images.pexels.com/photos/414391/pexels-photo-414391.jpeg?auto=compress&cs=tinysrgb&h=350') center no-repeat;
  background-size: cover;
}

		    
                    

                    
                

                

                                    

            

            

                

                    
1 Ответов

                                            

                            
Рейтинг:
 1


                            

                                

                                    iJustine
                                    
                                

                                

    Я использую liveweave[^] 

это должно сработать. В случае, если у вас возникнут какие-либо проблемы, не стесняйтесь спрашивать меня. 

Это был бы мой подход..

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Meg</title>
    <link rel="stylesheet" href="masterp2.css">
  </head>
  <body>
    <div class="container">
      <div class="split left">
        <button type="button" name="btnl">Mer info</button>
      </div>
      <div class="split right">
        <button type="button" name="btnr">Mer info</button>
      </div>
      <div class="split rightmiddle">
        <button type="button" name="btnm">Mer info</button>
      </div>
      <div class="split leftmiddle">
        <button type="button" name="btnlm">Mer info</button>
      </div>
    </div>
  </body>
</html>



CSS
html, body{
  margin: 0;
  padding: 0;
}
*
{
  box-sizing: border-box;
}
.container
{
  width: 100%;
  display: block;
}
button{
  background: none;
  color: #ccc;
  width: 150px;
  height: 80px;
  border: 1px solid #338033;
  font-size: 18px;
  border-radius: 4px;
  transition: .6s;
  overflow: hidden;
}
button:hover{
  background: #338033;
  cursor: pointer;
  outline: none;
}
.left button, .right button, .rightmiddle button, .leftmiddle button{
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.split{
  width: 25%;
  height: 200px;
  overflow: hidden;
  position: relative;
  top: 0;
  overflow-x: hidden;
  float: left;
}
.left{
  background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat;
}
.right{
  background: url('https://images.pexels.com/photos/860564/pexels-photo-860564.jpeg?auto=compress&cs=tinysrgb&h=650&w=940')  center no-repeat;
}
.rightmiddle{
  background: url('https://images.pexels.com/photos/1133957/pexels-photo-1133957.jpeg?auto=compress&cs=tinysrgb&h=650&w=940') center center no-repeat;
}
.leftmiddle{
  background: url('https://images.pexels.com/photos/414391/pexels-photo-414391.jpeg?auto=compress&cs=tinysrgb&h=350') center no-repeat;
}
.left, .right, .rightmiddle, .leftmiddle
{
  background-size: cover;
}




Если у вас нет других кнопок на странице, сделайте это .левую кнопку, .правую кнопку, .кнопка rightmiddle, .кнопка leftmiddle  это много работы, которую вы должны скорее использовать  кнопка только.
Не забудьте оценить, если это помогло