이미지가있는 텍스트의 인라인 단어 분리

이미지의 오른쪽에 텍스트를 배치하려고합니다. 이미지 아래에 가지 않고 텍스트를 "중단"해야합니다.이미지가있는 텍스트의 인라인 단어 분리

텍스트의 "중단"은 의도적으로 제한된 폭의 결과입니다.

나는 JSFiddle of what I'm trying to do을 만들었지 만 고장났습니다. 일부 텍스트는 이미지의 오른쪽에 있으며 올바른 것은 나머지 이미지는 이미지 아래에 있으며 이는 잘못된 것입니다.

이 문제를 해결하려면 어떻게해야합니까? 대부분의 마크 업이나 스타일을 자유롭게 사용할 수 있습니다. 필자는 예제에서 div 요소로 제한되지 않았습니다.

2017-03-24 Brent Arias

나는 당신을 위해 코드를 수정했다. 나는 그것이 도움이되기를 바랍니다.

<body style="width: 280px"> 
 

 
<img style="float: left;margin-right:20px;" src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" /> 
 
<div style="word-wrap:break-word">Jonathan-Paul Montgomery-Benson</div> 
 

 
</body>

를 코딩하는 더 좋은 방법은 인라인 스타일을 방지하는 것입니다. 내가 마크 업의 일부 변경을했을

body { 
 
     width: 280px; 
 
    } 
 
    img { 
 
     float: left; 
 
     margin-right: 20px; 
 
    } 
 
    .break { 
 
     word-wrap: break-word; 
 
    }

<body> 
 

 
<img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" /> 
 
<div class="break">Jonathan-Paul Montgomery-Benson</div> 
 

 
</body>

출처

2017-03-24 04:50:38

, 텍스트가 실제로 동작 내가 원하는 방식. 오버플로 : 숨겨진 것이 불필요하게됩니다! 간단히 말해서, 나의 예제에서 유일한 문제점은 "display : inline"을 사용한다는 것이다. 그 하나의 속성을 제거함으로써, 그것은 나의 목표를 성취합니다. –

이미지 오른쪽 아래에 텍스트를 추가하고 싶은 부분이 있습니까? –

오른쪽에. –

: 다음은이에 대한 미리보기입니다. 희망이 도움이 될 것입니다.

.block { 
 
    display: flex; 
 
    width: 280px; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
}

<body> 
 
    <div class="block"><img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" /> 
 
    <div>Jonathan-Paul Montgomery-Benson</div> 
 
    </div> 
 
</body>

출처

2017-03-24 04:52:16 Aslam

는이 작업을 달성하기 위해 다음과 같은 마크 업을 사용할 수 있습니다.

.row{width:280px;} 
 
.row:after{clear:both; content:""; display:block;} 
 
.img-col{width:40%; float:left;} 
 
.img-col img{width:100%; height:auto;} 
 
.des-col{width:57%; float:right;}

<div class="row"> 
 
    <div class="img-col"> 
 
    <img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" /> 
 
    </div> 
 
    
 
    <div class="des-col">Jonathan-Paul Montgomery-Benson</div> 
 

 
</div>

당신은 당신의 디자인에 따라 ".IMG-COL"폭을 설정할 수 있습니다

출처

2017-03-24 04:53:35

너비가 원본 280px로 설정되면 텍스트가 이미지 아래에 나타납니다. 280px 너비가 필요합니다. –

방금 위의 코드 조각을 편집했습니다. 확인해주십시오. –

나는 그것을 이렇게했습니다. 희망이 도움이됩니다.

.class-txt{ 
 
    display: inline; 
 
    word-wrap: break-word; 
 
    width: 60%; 
 
    position: relative; 
 
    
 
    float: left; 
 
} 
 
.img-class{ 
 
    width : 40%; 
 
    float:left; 
 
}

<body style="width: 280px"> 
 

 
<img class='img-class' src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" /> 
 
<div class="class-txt" style="display:inline; word-wrap: break-word;">Jonathan-Paul Montgomery-Bensononathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson</div> 
 

 
</body>

출처

2017-03-24 04:55:36 stack26

시도 사용할 display:flex; CSS 스타일 호텔 인 폭은 280px로 복원됩니다

<body style="width: 280px"> 
 

 
<img style="float: left;margin-right:20px;" src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" /> 
 
<div style="display:flex;">Jonathan-Paul Montgomery-Benson Jonathan-Paul Montgomery-Benson </div> 
 

 
</body>

이

출처

2017-03-24 04:59:18

<body> 
<div style="display:inline-flex; word-wrap: break-word;"> 
    <img style="float: left;" src="https://v.cdn.vine.co/r/avatars /23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" /> 
<div>Jonathan-Paul Montgomery-Benson</div> 
</div> 
</body>

출처

2017-03-24 05:15:10 sneha

이미지가있는 텍스트의 인라인 단어 분리

답변

관련 문제