需要HTML / CSS响应式帮助

时间:2014-07-24 23:08:53

标签: 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%;
}

1 个答案:

答案 0 :(得分:0)

这是因为图像设置为浮动。由于没有足够的空间并排放置,因此图像被第二个元素(段落文本)隐藏。

我不知道页面的确切内容,但您可以从.circular中移除浮动并添加位置:relative和display:inline-block to .circular和.aboutuspage