이미지

Question

[I 라디오 여기 의 왼쪽에있는 이미지를 배치하고자하는 코드를입니다

HTML :

  <div class="btn btn-default"> 
       <input type="radio" id="cc" name="radio-button" 
       value="0"> 
       <label for="cc"> 
        <span><img src="images/joker.jpg"></span> 
        <span>Lorem Ipsum</span> 
        <span>Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit. In semper quam nunc.</span> 
       </label> 
      </div> 

가에 이미지 링크를 참조하십시오 당신은 01의 img 외부를 이동해야보다 내가하고 싶은 것을 볼 코멘트에서 언급 한 바와 같이 당신에게

https://i.stack.imgur.com/GVMJB.png

Answer 1

감사. 이것은 귀하의 모범이되는 예입니다. 당신은 당신이 같은 코드를 또한 라벨 내부의 입력을 넣어 조정할 수 있습니다 수직 input

.btn.btn-radio { 
 
    border: 1px solid #333 !important; 
 
    margin: 10px; 
 
    border-radius: 0px !important; 
 
    padding: 1em !important; 
 
    overflow: hidden; 
 
    display: -ms-flex; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 
.left-img { 
 
    min-width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #333; 
 
    margin-right: 20px; 
 
    background: url(https://images.unsplash.com/photo-1503249023995-51b0f3778ccf?auto=format&fit=crop&w=311&q=80); 
 
    background-size: cover; 
 
} 
 

 
.right-input { 
 
    text-align: left; 
 
    height: 100%; 
 
} 
 

 
label.example p { 
 
    white-space: normal; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn btn-radio"> 
 
    <div class="left-img"></div> 
 
    <div class="right-input"> 
 
    <input type="radio" id="cc" name="radio-button" value="0" /> 
 
    <label class="example" for="cc"> 
 
      <h3>Lorem</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</p> 
 
     </label> 
 
    </div> 
 
</div>

Answer 2

을 정렬 할 수 있습니다

label { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
label input { 
 
    margin: 5px; 
 
}

<div class="btn btn-default"> 
 
    <label for="cc"> 
 
    <img src="https://lorempixel.com/100/100/"> 
 
    <input type="radio" id="cc" name="radio-button" value="0"> 
 
    <div> 
 
     <h3>Lorem Ipsum</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur 
 
     adipiscing elit. In semper quam nunc.</p> 
 
    </div> 
 
    </label> 
 
</div>