텍스트가 서로 3 개의 이미지가 서로 나란히 있습니다.

3 개의 이미지가 서로 옆에 있지만 전체 화면을 채우고 싶습니다. 그래서 나는이 있습니다텍스트가 서로 3 개의 이미지가 서로 나란히 있습니다.

.container { 
 
     position: relative; 
 
     text-align: center; 
 
     color: white; 
 
     max-width: 99%; 
 
    } 
 
    img.forside, 
 
    img.forside-1, 
 
    img.forside-2 { 
 
     opacity: 0.7; 
 
    } 
 
    img.forside:hover, 
 
    img.forside-1:hover, 
 
    img.forside-2:hover { 
 
     transition: 1s ease; 
 
     opacity: 1; 
 
     filter: brightness(70%); 
 
    } 
 
    img.forside-2 { 
 
     width: 30%; 
 
     display: inline-block; 
 
     margin-top: 2%; 
 
    } 
 
    img.forside-1 { 
 
     width: 30%; 
 
     display: inline-block; 
 
     margin-left: 2%; 
 
     margin-right: 3%; 
 
     margin-top: 2%; 
 
    } 
 
    img.forside { 
 
     width: 30%; 
 
     display: inline-block; 
 
     margin-right: 3%; 
 
     margin-top: 2%; 
 
    }

<div class="forsidebilleder"> 
 
    <a href="index.php/personlig-traening"><img class="forside-1" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" /> 
 
    </a> 
 
    <a href="index.php/individuel-programmering"><img class="forside" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" /> 
 
    </a> 
 
    <a href="index.php/crossfit-bootcamp"><img class="forside-2" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" /> 
 
    </a> 
 
</div>

나는 더 나은 기록 할 수있어,하지만 난 그것을 작동시킬 수 없습니다. 그러나이 방법으로, 3 개의 이미지는 각 측면에서 같은 양의 공간으로 서로 완벽하게 인접 해 있습니다. 하지만 내가 원했던 것은 각 이미지 위에 헤드 라인을 쓰는 것이지만, 어떻게 해야할지 모르겠습니다.

질문을 이해하십니까? :) 조금 지저분하면 죄송합니다.

출처

2017-11-28 Daniel Jensen

시도해 볼 수있는 간단한 코드를 제공 할 수 있습니까? – Swellar

플렉스를 사용해보십시오. display : flex와 같은 속성; 플렉스 방향 : 오른쪽; . 기본적인 flex 속성을 사용하여 원하는대로 정렬 할 수 있습니다. –

@Swellar Ehm, 어떻게 하죠? : D 나는 새로운 여기있어 :) –

flex를 사용하여 배경 이미지를 고려하여 텍스트를 사용할 수 있습니다. 또한 이미지의 불투명도를 제어하는 오버레이를 추가 할 수 있습니다 :

UPDATE를

모바일

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 

 
.image { 
 
    position: relative; 
 
    flex: 1; 
 
    margin: 5px; 
 
    text-align: center; 
 
    background-size: cover; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.image:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    transition: 1s; 
 
} 
 

 
.image:hover::before { 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.image p { 
 
    position: relative; 
 
    z-index: 1; 
 
    flex: 1; 
 
    color: #fff; 
 
    font-size: 18px; 
 
} 
 

 
@media all and (max-width:460px) { 
 
    .container { 
 
    flex-direction: column 
 
    } 
 
}

<div class="container"> 
 
    <div class="image" style="background-image:url(https://lorempixel.com/400/600/)"> 
 
    <p>text text</p> 
 
    </div> 
 
    <div class="image" style="background-image:url(https://lorempixel.com/500/400/)"> 
 
    <p>text text</p> 
 
    </div> 
 
    <div class="image" style="background-image:url(https://lorempixel.com/600/600/)"> 
 
    <p>text text</p> 
 
    </div> 
 
</div>

당신은 여백을 조정할 수에 더 잘 볼에 대한

추가 된 미디어 쿼리 네가 원하는 것처럼 키와 높이.

출처

2017-11-28 09:55:07

나는 이미지에 텍스트를 넣고 싶다. :) 아래에 없지만 이미지에 쓰여져 있다면 좋아한다. :) –

@DanielJensen ok 업데이트 예정;) –

@DanielJensen 다시 확인 :) –

<style> 
img { 
    width: 100%; 
} 
.timetable { 
    position: relative; 
} 
.content { 
    position: absolute; 
    z-index: 999999; 
    bottom: 0; 
    color: white; 
    padding-left: 21px; 
} 
</style> 



<!DOCTYPE html> 
<html> 
<head> 
    <title>Gallery</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
</head> 
<body> 

<div class="timetable"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="set up time" width="30%"> 
      <div class="content"> 
       <h3>Hello</h3> 
      </div> 
      </div> 
      <div class="col-md-4"> 
      <img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="doors open" width="30%"> 
      <div class="content"> 
       <h3>Hello</h3> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="Foodtrucks" width="30%"> 
      <div class="content"> 
       <h3>Hello</h3> 
      </div> 
     </div> 
     </div> 
     </div> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 
</html>

출처

2017-12-18 08:22:32 Harshaja

텍스트가 서로 3 개의 이미지가 서로 나란히 있습니다.

답변

관련 문제