Question

overlap

图像在桌面和桌面上显示完美移动媒体查询，但当我在平板电脑中看到我的页面时，它会显示有关重叠类型的一些问题。我已经上传了快照。请告诉我如何解决这个问题。我的源代码如下所示。我尽我所能，但我不知道如何调试它。请尽量解决它。我已经将视口宽度从80更新到100，但问题仍然存在。

index.html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Custom CSS -->
    <link href="main.css" rel="stylesheet">
    <link href="mividamylife.css" rel="stylesheet">

    <!-- Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Sans">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two">

</head>

<body>

    <!-- Brand -->
    <div class="brand"> 
       <a href="index.html">
        <h3 class="name">LOURDES GABRIELA</h3>
        <h5 class="incorporated">I n t e r i o r s,  I n c.</h5>
       </a>
    </div> 

    <!-- Nav Links for Phone-->
    <div class="nav-phone" style="hidden">
        <a href="index.html">Home</a>
        <a href="Projects.html">Projects</a>
        <a href="MiVidaMyLife.html">MiVidaMyLife</a>
        <a href="Media.html">Media</a>
        <a href="Artwork.html">Artwork</a>
        <a href="Contact.html">Contact</a>  
    </div>

    <!-- Box -->
    <div class="newbox">
        <div class="readiblecolumns">

            <div class="profile">
                <img src="Pictures/MiVidaMyLife/mividapicture.jpg" alt="">
            </div>

            <div>
               <p>I was born in Cuba and raised in Panama. Though I left Panama at 17 to attend Vassar College. Panama in many ways will always be embedded in my psyche: memories of the down pouring tropical storms while sitting on our veranda or deep sea fishing in the turquoise waters of the Caribbean; the impromptu cocktail parties or the formal dinners fit for a king; and last but by no means least, the open doors that welcomed friends at any time, day or night. These early experiences have had an immense influence on my sense of lifestyle.<br><br>I went abroad to New York to study at Vassar College, a bastion of liberal arts in the 70’s. My B.A. was in Literature, but my interests were limitless. I studied Art History with the distinguished Art Historian, Professor Linda Nochlin, sculpture with the prolific sculptor Sydney Geist. My painting professor taught us to experience art beyond something hung on the wall or put on a pedestal in a museum. At Vassar I learned how to think and examine the root of a question as a way of answering it critically and most importantly I was taught to see.<br><br>I went abroad to Paris and continued my studies in French Literature, Art History and Classical Architecture. As a young woman living in Paris, I took every possible opportunity to travel and experience the art and architecture of Europe. Paris in the late 70’s released the free spirit in me, freeing me from inhibitions and unleashing a sense of fearlessness that has had a formative influence on me as a designer.<br><br>498 7th Avenue in Manhattan is where I began my career in the world of fashion, becoming the Fashion Director for Sasson Jeans and then Jordache until the late 80’s when I moved to Miami. I set the fashion trends and traveled regularly to Paris, London, Milan, Rome, St Tropez, Florence, Hong Kong and Japan.The key to great design in fashion is to create what will be wanted. The key to great design in interiors is capturing the spirit of the client and the essence of the space.<br><br>I now live in Miami and summer in the mountains of western North Carolina. It was my fashion background, as well as the knowledge I gained from the study of art, that led me to interior decorating. I continue to paint and travel the world looking for the next cool, one-of-a-kind object, pattern or detail that will be the inspiration for my next project.</p>
            </div>
            </div>

    </div>

    <!-- Nav Links -->
    <div class="nav">
        <a href="index.html">Home</a>
        <a href="Projects.html">Projects</a>
        <a href="MiVidaMyLife.html">MiVidaMyLife</a>
        <a href="Media.html">Media</a>
        <a href="Artwork.html">Artwork</a>
        <a href="Contact.html">Contact</a>  
    </div>

    <!-- Footer -->
    <footer>
        <div class="signature">
            <p>a boutique design company - miami</p>
        </div>
    </footer>


    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>

</html>

main.css


#profile_text
{
    margin-left:20px;
    margin-right:20px;
}
.nav-phone>a:nth-child(3) {
    background-color: #fbc076;
}

.nav>a:nth-child(3) {
    background-color: #fbc076;
}

.newbox {
    background-color: white;
    display: block;
    margin: auto;
}

.readiblecolumns {
    background-color: white;
}

.readiblecolumns>p {
    line-height: 1;
}

/* Desktop */
@media screen and (min-width: 960px) {

    .newbox {
        height: auto;
        width:80vw;
    }

    /* Reads Like Newspaper */
    .readiblecolumns {
        width: 80vw;
        padding: 20px;
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .readiblecolumns>p {
        font-size: 90%;
    }

    .profile {
        height: 480px;
        margin-bottom: 20px;
    }

    .profile img {
        height: 100%;
        width: auto;
        //margin-right:20px;
        padding-right:20px;
        margin-bottom: 20px;
    }

}

/* Tablet */
@media screen and (min-width: 520px) and (max-width: 959px) {

    .newbox {
        height: auto;
        width: 80vw;
    }

    .readiblecolumns {
        width: 80vw;
        padding: 20px;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .readiblecolumns>p {
        font-size: 100%;
    }

    .profile {
        height: 320px;
        margin-bottom: 20px;
    }

    .profile img {
        height: 100%;
        background-attachment:fixed;
        width: 100px;
        margin-bottom: 20px;
    }

}

/* Phone */
@media screen and (max-width: 519px) {

    .newbox {
        height: auto;
        width: 90vw;
    }

    .readiblecolumns {
        width: 90vw;
        padding: 15px;
    }

    .readiblecolumns>p {
        font-size: 100%;
    }

    .profile {
        width: 90%;
        margin: auto;
        padding-bottom: 15px;
    }

    .profile img {
        width: 100%;
        height: auto;
        margin-top: 5%;
    }

}

Answer 1

您似乎正在使用引导程序。你需要重构你的html并使用bootstrap的网格布局，这是一个响应，你不会有这个问题。 http://getbootstrap.com/css/#grid

文本重叠在Firefox中的图像问题

1 个答案: