Question

我正在开发一个使用HTML文件的应用。在这个文件中，HTML标签没有正确安装，所以文本是大的。我可以滚动到我的手机很多。我尝试使用以下代码解决问题。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
        /***** STYLE *****/

        .clearfix:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }

        .clearfix {
            display: inline-block;
        }

        html[xmlns] .clearfix {
            display: block;
        }

        * html .clearfix {
            height: 1%;
        }

        html {

        }

        body {
            margin: 0;
            padding: 0;
            bottom: 0;
            top: 0;
            color: #000;
            font-family: Helvetica, Geneva, sans-serif;
            font-weight: normal;
            font-size: 12px;
            text-align: left;
            height: auto;
        }
        #wrapper {
            height: auto;
            margin-top: 10;
            margin-left: 10;
        }

        h1 {
            margin: 20px 0 10px 0;
            color: #000;
            font-family: "Droid", Helvetica, Geneva, sans-serif;
            font-weight: bold;
            font-size: 13px;
        }

        h1:first-child {
            margin-top: 0;
        }

        p {
            margin-bottom: 5px;
        }
        p.status {
            padding-left: 10px;
            border-left: 5px solid;
        }

        .imageWrap {
            width: 30;
            float: left;
        }
        .textWrap {
            padding-top: 10;
            margin-left: 50;
        }
        .contener {
            margin-top: 10;
        }

    </style>
</head>
<body class="clearfix">
    <div id="wrapper" class="clearfix">
        <h1>Was macht diese App</h1>
        <p>
            In dieser App sind Empfehlungen zur Risikovermeidung bei Nahrungsmitteln während der Schwangerschaft zusammengestellt.
        </p>
        <p>
            Hierzu wurden Informationen aus öffentlich zugänglichen Quellen zusammengetragen.
            <br/>
            Die Informationen dieser App berücksichtigen den Forschungs- bzw. Wissenstand bezüglich der genannten Nahrungsmittel bis zum April 2012.
        </p>

        <p>
            Die Informationen beziehen sich auf den deutschen Markt bei einem unauffälligen Schwangerschaftsverlauf und einem durchschnittlichem Essverhalten.
        </p>
        <h1>Was macht diese App nicht</h1>
        <p>
            Diese App ersetzt keine medizinische Beratung oder Betreung.
        </p>
        <p>
            Diese App ist keine ernährungswissenschaftliche Beratung und berücksichtigt insbesondere keine individuellen Risikofaktoren.
        </p>
        <p>
            Die Qualität der Lebensmittel wird nicht bewertet.
        </p>
        <p>
            Die App berücksichtigt keine Änderungen über den oben genannten Zeitpunkt hinaus hinsichtlich des Forschungs- bzw.
        </p>
        <p>
            Wissenstands sowie keine tagesaktuellen Lebensmittelskandale.
        </p>
        <h1>Legende</h1>
        <div class="contener" class="clearfix">
            <div class="imageWrap">
                <img src = "../data/ic_status_red.png">
            </div>
            <div class="textWrap" class="clearfix">
                <strong> Rot:</strong> Vom Verzehr wird abgeraten
            </div>
        </div>
        <br/>
        <div class="contener" class="clearfix">
            <div class="imageWrap" style="margin-top: 6"><img src = "../data/ic_status_yellow.png">
            </div>
            <div class="textWrap">
                <strong>Gelb:</strong> Vom Verzehr wird unter bestimmten Bedingungen abgeraten
            </div>
        </div>
        <br/>
        <div class="contener" class="clearfix">
            <div class="imageWrap"><img src = "../data/ic_status_green.png">
            </div>
            <div class="textWrap">
                <strong> Grün:</strong> Keine Risiken bekannt
            </div>
        </div>
        <h1>Impressum</h1>
        <p>
            Eine glückliche Schwangerschaft wünscht Ihnen:
        </p>
        <p>
            <strong>Firmenname</strong>
            <br />
            Hauptstr. 1
            <br />
            12345 Wolkenkuckucksheim
        </p>
    </div>
</body>

Answer 1

首先验证你正在使用的html ......

继承人正确的HTML， http://jsfiddle.net/EfPUS/

<div id="wrapper" class="clearfix">
    <h1>Was macht diese App</h1>
    <p>
        In dieser App sind Empfehlungen zur Risikovermeidung bei Nahrungsmitteln während der Schwangerschaft zusammengestellt.
    </p>
    <p>
        Hierzu wurden Informationen aus öffentlich zugänglichen Quellen zusammengetragen.
        <br/>
        Die Informationen dieser App berücksichtigen den Forschungs- bzw. Wissenstand bezüglich der genannten Nahrungsmittel bis zum April 2012.
    </p>

    <p>
        Die Informationen beziehen sich auf den deutschen Markt bei einem unauffälligen Schwangerschaftsverlauf und einem durchschnittlichem Essverhalten.
    </p>
    <h1>Was macht diese App nicht</h1>
    <p>
        Diese App ersetzt keine medizinische Beratung oder Betreung.
    </p>
    <p>
        Diese App ist keine ernährungswissenschaftliche Beratung und berücksichtigt insbesondere keine individuellen Risikofaktoren.
    </p>
    <p>
        Die Qualität der Lebensmittel wird nicht bewertet.
    </p>
    <p>
        Die App berücksichtigt keine Änderungen über den oben genannten Zeitpunkt hinaus hinsichtlich des Forschungs- bzw.
    </p>
    <p>
        Wissenstands sowie keine tagesaktuellen Lebensmittelskandale.
    </p>
    <h1>Legende</h1>
    <div class="contener clearfix">
        <div class="imageWrap">
            <img src = "../data/ic_status_red.png">
        </div>
        <div class="textWrap clearfix">
            <strong> Rot:</strong> Vom Verzehr wird abgeraten
        </div>
    </div>
    <br/>
    <div class="contener clearfix">
        <div class="imageWrap" style="margin-top: 6"><img src = "../data/ic_status_yellow.png">
        </div>
        <div class="textWrap">
            <strong>Gelb:</strong> Vom Verzehr wird unter bestimmten Bedingungen abgeraten
        </div>
    </div>
    <br/>
    <div class="contener clearfix">
        <div class="imageWrap"><img src = "../data/ic_status_green.png">
        </div>
        <div class="textWrap">
            <strong> Grün:</strong> Keine Risiken bekannt
        </div>
    </div>
    <h1>Impressum</h1>
    <p>
        Eine glückliche Schwangerschaft wünscht Ihnen:
    </p>
    <p>
        <strong>Firmenname</strong>
        <br />
        Hauptstr. 1
        <br />
        12345 Wolkenkuckucksheim
    </p>
</div>

CSS HTML自动内容格式

1 个答案: