>source

flexbox를 사용하여 텍스트 블록의 오른쪽에 이미지를 넣으려고합니다. 사용해 보았습니다 justify-self:flex-end 이미지의 CSS에 있지만 의도 한대로 작동하지 않습니다.

HTML :

<div class="introduction">
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <li><h2>Text</h2></li>
    <li><h3></h3></li>
    <img src="picofme.jpg">
</div>

CSS :

.introduction{
  display:flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap:wrap;
  padding:10px;
  list-style:none;
  position:absolute;
  left:200px;
  text-align: center;
}
.introduction h2{
  font-size: large;
  font-weight: normal;
  color:#707070;
  
}
.introduction h3{
  background:#646CC5;
  padding:5px;
  margin:10px;
  width:300px;
  height:5px;
 
}
.introduction img{
  width:100%;
  height:auto;
  justify-self: flex-end;
}

사이트 이미지, 이미지는 오른쪽의 빈 공간을 채워야하지만 현재 텍스트 블록 아래에 있습니다. 블랙 박스는 텍스트를위한 자리 표시 자입니다.

  • 답변 # 1

    <li> 내부에 포장해야 <ol> 또는 <ul> tag이면 플렉스가 실제로 필요한 것일 수 있습니다.

    또한 <h3></h3> 디자인 요소가 아닌 텍스트를 포함하는 제목이어야합니다. <li> 대신 테두리를 가질 수 있습니다.

    가능한 예 :

    .introduction {
      display: flex;
      padding: 10px;
      width:max-content;
      margin: auto;
    }
    ul {
      list-style: none;
      flex-grow: 1;
      text-align: center; 
      width: 300px;
    }
    .introduction h2 {
      font-size: large;
      font-weight: normal;
      color: #707070;
      border-bottom: solid 1.6rem #646CC5;
    }
    .introduction img {
      margin: auto 1em;
    }
    
    

    <div class="introduction">
      <ul>
        <li>
          <h2>Text</h2>
        </li>
        <li>
          <h2>Text</h2>
        </li>
        <li>
          <h2>Text</h2>
        </li>
        <li>
          <li>
            <h2>Text</h2>
          </li>
          <li>
            <h2>Text</h2>
          </li>
      </ul>
      <img src="https://dummyimage.com/100/159">
    </div>
    
    

  • 답변 # 2

    여기에 사용할 수있는 스 니펫이 있습니다. 기본적으로 방금 제거했습니다. flex-direction: column; ...에서 .introduction 그리고 그것을 변경했습니다 flex-direction: row; 행에 자식 요소를 표시합니다. 그런 다음이 이상한 텍스트 요소를 다른 div로 래핑했습니다. 결과는 다음과 같습니다.

    .introduction{
      display:flex;
      flex-direction: row;
      justify-content: center;
      padding:10px;
      list-style:none;
      position:absolute;
      left:200px;
      text-align: center;
    }
    .introduction h2{
      font-size: large;
      font-weight: normal;
      color:#707070;
      
    }
    .introduction h3{
      background:#646CC5;
      padding:5px;
      margin:10px;
      width:300px;
      height:5px;
     
    }
    .introduction img{
      width:100%;
      height:auto;
    }
    .text_div {
      display:flex;
      flex-direction: column;
    }
    
    

    <div class="introduction">
      <div class="text_div">
        <li><h2>Text</h2></li>
        <li><h3></h3></li>
        <li><h2>Text</h2></li>
        <li><h3></h3></li>
        <li><h2>Text</h2></li>
        <li><h3></h3></li>
        <li><h2>Text</h2></li>
        <li><h3></h3></li>
        <li><h2>Text</h2></li>
        <li><h3></h3></li>
      </div>
        <img src="https://via.placeholder.com/150">
    </div>
    
    

관련 자료

  • 이전 php - WooCommerce에서 Local Pickup 배송 방법에 대한 특정 결제 방법 만 유지
  • 다음 코드는 R에서 반짝이는 변경 사항을 애니메이션하지 않습니다