내 문제는 상당히 간단하지만 저에게 정말 어려움이 있습니다. 떠 다니는 도움과 혼란
나는 다음과 같은 CSS로 썸네일이 있습니다
float: none;
margin-right: 0;
display: block;
와 나는 몇 가지 텍스트가 그 오른쪽을 다음 CSS :
position: relative;
text-decoration: none;
text-indent: 0;
이제 위대한 작품입니다! 그러나 사용자가 창 크기를 조정하면 텍스트가 원하지 않는 축소판 아래로 점프합니다 (나는 반응 형 웹 사이트를 사용하고 있습니다)! 어떻게 이런 일이 이런 식으로 행동하는 것을 막을 수 있습니까? 나는 연령대에 함께 주위를 연주되었고,이 문제를 :(해결할 수 없다. 낮은 화면 크기를 위해 작성 스타일 내부
As per my understanding, the reason might be:
There may be some float left given to the thumbnail image somewhere
. 당신이 할 수있는 최선의 일이며, 검사 불을 지르고 또는 무언가를 사용하여 모든 float 왼쪽이 썸네일 이미지에 부여 여부 및 을 확인합니다. 그렇다면, 그 제거 또는 없음으로 플로트로 제공합니다.
화면 크기를 조정할 때 이미지 아래 전체 텍스트를 필요로 확인하는 경우 , 당신은 명확한 것을 사용할 수 있습니다 : 낮은 화면 크기를 위해, 텍스트 div가 주어진다.
리뷰 링크를 제공 할 수 있다면 실제 문제를 쉽게 해결할 수 있습니다. 희망은 내 솔루션이 도움이됩니다.
이 당신이 원하는 것을 할 것으로 보인다:-) 주셔서 감사합니다 :
<html>
<head>
<style>
img {
float: left;
width: 40px;
height: 40px;
border: 1px solid gold;
margin-left: 5px;
}
.text {
margin-left: 50px;
}
.container {
width: 150px;
border-left: 3px solid red;
}
</style>
</head>
<body>
<div class="container">
<img>
<div class="text">This should stay aligned and not go under the thumbnail.</div>
</div>
</body>
</html>
당신은 당신의 이미지와 범위 텍스트로 플로트 왼쪽 속성을 추가하고, 텍스트 왼쪽 여백에 추가 할 수
.box {
width: 210px;
vertical-align: text-top;
display: table-cel
}
.box img {
float: left;
width: 100px;
height: 100px;
}
.box span.text {
float: left;
width: 100px;
box-sizing: border-box;
}
예제를 jsfiddle에서 볼 수 있습니까? here
이것이 최고의 대답이라고 생각합니다. 두 요소는 서로 간섭해서는 안되기 때문에 부동해야합니다. –
HTML과 관련된 모든 CSS가 표시 될 수 있습니까? jsfiddle.net 또는 jsbin.com에 대한 최소 데모가 좋습니다. –
단순히 컨테이너 div에 미리보기 이미지를 넣고 너비와 높이를 정의한 다음 왼쪽으로 띄운 다음 텍스트를 왼쪽으로 떠있게됩니다. – iGanja