HTML/CSS 반응 도움 필요

-1

안녕하세요. 모바일에서 (브라우저를 망칠 때) 안녕히 계십시오. 왼편에있는 내 이미지가 내 페이지에서 사라지는 것 같습니다. 그게 무슨 일이 일어나고 있는지, 왜 그런 일이 일어날 지 모르겠다. 나는 이것으로 꽤 괜찮은 일을했다고 생각했다.HTML/CSS 반응 도움 필요

이미지 :

http://imgur.com/J7f8k2a.png

HTML :

<div class="aboutus"> 

<div class="circular"></div> 

<p class="aboutuspage"><font size="5" style="font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif;">Bob Saggot</font><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate neque at tortor scelerisque mollis. Mauris ultricies elit eget tortor elementum, quis feugiat odio venenatis. Nulla consequat orci at nulla hendrerit, eu consectetur ligula fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in ipsum tincidunt, tincidunt diam eget, aliquam tellus. Aenean metus ipsum, dapibus sit amet convallis non, aliquam quis mauris. Etiam suscipit massa nisl, id molestie tortor luctus nec. Quisque sit amet sodales massa. Donec posuere ultricies nisi, non pretium libero.</p> 

</div> 
&nbsp; 
&nbsp; 
<div class="aboutus"> 

<div class="circular"></div> 

<p class="aboutuspage"><font size="5" style="font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif;">Bob Saggot</font><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate neque at tortor scelerisque mollis. Mauris ultricies elit eget tortor elementum, quis feugiat odio venenatis. Nulla consequat orci at nulla hendrerit, eu consectetur ligula fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in ipsum tincidunt, tincidunt diam eget, aliquam tellus. Aenean metus ipsum, dapibus sit amet convallis non, aliquam quis mauris. Etiam suscipit massa nisl, id molestie tortor luctus nec. Quisque sit amet sodales massa. Donec posuere ultricies nisi, non pretium libero.</p> 

</div> 
&nbsp; 
&nbsp; 
<div class="aboutus"> 

<div class="circular"></div> 

<p class="aboutuspage"><font size="5" style="font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif;">Bob Saggot</font><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate neque at tortor scelerisque mollis. Mauris ultricies elit eget tortor elementum, quis feugiat odio venenatis. Nulla consequat orci at nulla hendrerit, eu consectetur ligula fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in ipsum tincidunt, tincidunt diam eget, aliquam tellus. Aenean metus ipsum, dapibus sit amet convallis non, aliquam quis mauris. Etiam suscipit massa nisl, id molestie tortor luctus nec. Quisque sit amet sodales massa. Donec posuere ultricies nisi, non pretium libero.</p> 

</div> 
&nbsp; 
&nbsp; 
<div class="aboutus"> 

<div class="circular"></div> 
<p class="aboutuspage"><font size="5" style="font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif;">Bob Saggot</font><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate neque at tortor scelerisque mollis. Mauris ultricies elit eget tortor elementum, quis feugiat odio venenatis. Nulla consequat orci at nulla hendrerit, eu consectetur ligula fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in ipsum tincidunt, tincidunt diam eget, aliquam tellus. Aenean metus ipsum, dapibus sit amet convallis non, aliquam quis mauris. Etiam suscipit massa nisl, id molestie tortor luctus nec. Quisque sit amet sodales massa. Donec posuere ultricies nisi, non pretium libero.</p> 

</div> 
&nbsp; 
&nbsp; 
<div class="aboutus"> 

<div class="circular"></div> 
<p class="aboutuspage"><font size="5" style="font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif;">Bob Saggot</font><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate neque at tortor scelerisque mollis. Mauris ultricies elit eget tortor elementum, quis feugiat odio venenatis. Nulla consequat orci at nulla hendrerit, eu consectetur ligula fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in ipsum tincidunt, tincidunt diam eget, aliquam tellus. Aenean metus ipsum, dapibus sit amet convallis non, aliquam quis mauris. Etiam suscipit massa nisl, id molestie tortor luctus nec. Quisque sit amet sodales massa. Donec posuere ultricies nisi, non pretium libero.</p> 

</div> 
&nbsp; 
&nbsp; 
<div class="aboutus"> 

<div class="circular"></div> 
<p class="aboutuspage"><font size="5" style="font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif;">Bob Saggot</font><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate neque at tortor scelerisque mollis. Mauris ultricies elit eget tortor elementum, quis feugiat odio venenatis. Nulla consequat orci at nulla hendrerit, eu consectetur ligula fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in ipsum tincidunt, tincidunt diam eget, aliquam tellus. Aenean metus ipsum, dapibus sit amet convallis non, aliquam quis mauris. Etiam suscipit massa nisl, id molestie tortor luctus nec. Quisque sit amet sodales massa. Donec posuere ultricies nisi, non pretium libero.</p> 

</div> 
&nbsp; 
&nbsp; 
<div class="aboutus"> 

<div class="circular"></div> 
<p class="aboutuspage"><font size="5" style="font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif;">Bob Saggot</font><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate neque at tortor scelerisque mollis. Mauris ultricies elit eget tortor elementum, quis feugiat odio venenatis. Nulla consequat orci at nulla hendrerit, eu consectetur ligula fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in ipsum tincidunt, tincidunt diam eget, aliquam tellus. Aenean metus ipsum, dapibus sit amet convallis non, aliquam quis mauris. Etiam suscipit massa nisl, id molestie tortor luctus nec. Quisque sit amet sodales massa. Donec posuere ultricies nisi, non pretium libero.</p> 

</div> 
&nbsp; 
&nbsp; 
<div class="aboutus"> 

<div class="circular"></div> 
<p class="aboutuspage"><font size="5" style="font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif;">Bob Saggot</font><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate neque at tortor scelerisque mollis. Mauris ultricies elit eget tortor elementum, quis feugiat odio venenatis. Nulla consequat orci at nulla hendrerit, eu consectetur ligula fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in ipsum tincidunt, tincidunt diam eget, aliquam tellus. Aenean metus ipsum, dapibus sit amet convallis non, aliquam quis mauris. Etiam suscipit massa nisl, id molestie tortor luctus nec. Quisque sit amet sodales massa. Donec posuere ultricies nisi, non pretium libero.</p> 

</div> 
&nbsp; 
&nbsp; 
<div class="aboutus"> 

<div class="circular"></div> 
<p class="aboutuspage"><font size="5" style="font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif;">Bob Saggot</font><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate neque at tortor scelerisque mollis. Mauris ultricies elit eget tortor elementum, quis feugiat odio venenatis. Nulla consequat orci at nulla hendrerit, eu consectetur ligula fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in ipsum tincidunt, tincidunt diam eget, aliquam tellus. Aenean metus ipsum, dapibus sit amet convallis non, aliquam quis mauris. Etiam suscipit massa nisl, id molestie tortor luctus nec. Quisque sit amet sodales massa. Donec posuere ultricies nisi, non pretium libero.</p> 

</div> 
&nbsp; 
&nbsp; 
<div class="aboutus"> 

<div class="circular"></div> 
<p class="aboutuspage"><font size="5" style="font-family: 'Oswald', 'Helvetica Neue', Helvetica, sans-serif;">Bob Saggot</font><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate neque at tortor scelerisque mollis. Mauris ultricies elit eget tortor elementum, quis feugiat odio venenatis. Nulla consequat orci at nulla hendrerit, eu consectetur ligula fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in ipsum tincidunt, tincidunt diam eget, aliquam tellus. Aenean metus ipsum, dapibus sit amet convallis non, aliquam quis mauris. Etiam suscipit massa nisl, id molestie tortor luctus nec. Quisque sit amet sodales massa. Donec posuere ultricies nisi, non pretium libero.</p> 

</div>

CSS :

이미지가 떠 설정 때문입니다

.aboutus:firstchild 
{ 
    width: 984px; 
    min-width: 984px; 
    min-height: 56px; 
    height: 56px; 
    padding: 0 20px; 
    text-align: left; 

} 
.circular 
{ 
    text-align: right; 
    float: left; 
    display: block; 
    min-width: 250px; 
    min-height: 250px; 
    width: 250px; 
    height: 250px; 
    border-radius: 150px; 
    -webkit-border-radius: 150px; 
    -moz-border-radius: 150px; 
    background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/02/desktop.jpg) no-repeat; 
    } 
p.aboutuspage 
{ 
width: 500px; 
min-width: 500px; 
margin-left: 30%; 
}

출처

2014-07-24 vbaid

내가 문제를 재현 할 수 .aboutuspage . 내 게시물에 '반응 형'코드 (예 : 미디어 검색어)가 표시되지 않습니다. 문제를 설명하는 데 도움이되는 모든 관련 코드와 가능한 경우 [jsfiddle] (http://jsfiddle.net/)을 포함하십시오. – showdev

css : first-child가 유효합니다. : firstchild되지 않습니다. 글꼴 태그, 인라인 스타일, nbsp를 사용하고 있습니다. 어쩌면 이미지를 걱정하기 전에 모든 것을 정리해야합니다. –

이 질문을하지 않았습니까? http : //stackoverflow.com/questions/24921661/image -disappears-in-mobile-html-css –

. 두 이미지가 나란히있을 공간이 없으므로 이미지는 두 번째 요소 (단락 텍스트)에 의해 숨겨집니다.

나는 페이지가 정확히 어떻게 생겼는지 모르겠지만, 당신은 .circular에서 플로트를 제거하고 위치를 추가 할 수 있습니다 상대와 디스플레이 : 인라인 블록 .circular하고

출처

2014-07-24 23:17:26 Mykel

HTML/CSS 반응 도움 필요

답변

관련 문제