Question

嘿我正在建立一个网站，最近看到了一些问题与CSS。我的标题div工作得很好，也许是因为我的宽度为100％。但我的主要和侧面div似乎有一些尺寸问题。我的主ID上的宽度为1288px，当我检查它时，它更少。我希望我的side div为页面宽度的30％，主div为页面的70％。我怎么能这样做？

这是我的php代码：

<?php

    $tjener = "localhost";
    $brukernavn = "root";
    $passord = "";
    $database = "searchengine";
    $connection = mysqli_connect($tjener,$brukernavn,$passord,$database) or die("could not connect");
    $connection->set_charset("utf8");
    $output = "";
    //collect
    if(isset($_POST["q"])) {
    $searchq = $_POST["q"];

    $searchq = mysqli_real_escape_string($connection,$searchq);
    $searchq = htmlspecialchars($searchq);
    $query = mysqli_query($connection,"SELECT * FROM products WHERE vareNavn LIKE '%$searchq%' OR desci LIKE '%$searchq%'");
    $count = mysqli_num_rows($query);
    if($count == 0) {
        $output = "There was no search results.";
    } else {
        while ($row = mysqli_fetch_array($query)) {
            $id = $row['vareNr'];
            $vareNavn = $row['vareNavn'];
            $desci = $row['desci'];
            $output .= "<h1>" . $vareNavn . "</h1><p> " . $desci . "</p><br/>";
        }
    }
}
?>


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script>

    function active(){
        var Search = document.getElementById("search");
        if(search.value == "Search..."){
            search.value = "";
            search.placeholder = "Search...";
        }
    }
    function inactive(){
        var Search = document.getElementById("search");
        if(search.value == ""){
            search.value = "Search...";
            search.placeholder = "";
        }
    }

    </script>
</head>
<body>

    <div id="header">
        <div id ="searchBar"> 
            <form action="main.php" method= "post">
                <input type="text" id="search" name="q" placeholder="" value="Search..." autocomplete="off" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="searchButton" value="Search"/>
            </form>

        </div>
    </div>
    <div id="main">
        <div id="oppstart">
            <h1>Newly commenced webstore</h1>
        </div>
        <div id="klokkeMer">
            <h2>Watches</h2>
        </div>
        <div id="div1">

        </div>
        <div id="div2">

        </div>
        <div id="div3">

        </div>
        <?php
        print($output);
        ?>

    </div>

    <div id="side">

    </div>



</body>
</html>

这是我的css代码：

body {
    font-family: arial;
}
h1 {
    margin: 20px 0px 0px 0px;
    padding:0;
}
p {
    margin: 0;
    padding:0;
}
#header {
    width:100%; /* Full lengde*/ 
    background-color:#1F2A40;
    height:100px; /* 150px */
    position:absolute;
    top:0px;
    left:0px;
}
#search {
        border: 1px solid #1F2A40;
        border-right:none;
        font-size:16px;
        padding:10px;
        outline:none;
        width:700px;
        -webkit-border-top-left-radius:10px;
        -webkit-border-bottom-left-radius:10px;
        -moz-border-radius-topleft:10px;
        -moz-border-radius-bottomleft:10px;
        border-top-left-radius:10px;
        border-bottom-left-radius:10px;
}
#searchButton {
    border: 1px solid #1F2A40;
    padding:10px;
    font-size:16px;
    background-color:#ff9933;
    font-weight:bold;
    color:#1F2A40;
    cursor:pointer;
    outline:none;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
}
#searchButton:hover {
    background-color:#F5870A;
}
#main {
    position:absolute;
    top:100px;
    background-color:red; // change to white when website is done
    width:1288px;
    height:800px;
    left:300px;
}
#side {
    position:absolute;
    top:100px;
    background-color:orange; // change to white when website is done
    width:300px;
    left:0px;
    height:800px;
}
#searchBar {
    position:absolute;
    width:800px;
    top:8px;
    left:250px;
    /* border:1px solid red; */ 
}
#div1 {
    position:absolute;
    width:100px;
    top:200px;
    left:300px;
    border:1px solid black;
    height:100px;
    background-color:purple;
}
#div2 {

}
#div3 {

}

Answer 1

尝试使用百分比作为主宽和宽边而不是像素

#side{
   width: 30%;
}
#main{
  width: 70%;
}

Answer 2

所以我要做的就是废弃这个css的大部分内容，然后使用Bootstrap 通过这种方式，您可以获得一套简洁易用的工具，以便在您的网页上使用。

您在标题中包含以下内容：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

在此之后，您使用此代码：

    <div id="side" class="col-md-3">
    Sidebar
    </div>

    <div id="main" class="col-md-9 col-md-offset-3">
        <div id="oppstart">
            <h1>Newly commenced webstore</h1>
        </div>
        <div id="klokkeMer">
            <h2>Watches</h2>
        </div>
        <div id="div1">

        </div>
        <div id="div2">

        </div>
        <div id="div3">

        </div>
        <?php
        print($output);
        ?>

    </div>

在jsfiddle

上查看此处的操作

它可能没有您的确切尺寸，但是这为您提供了一套可以在您的网站上使用的CSS的规则

Css div搞砸了

2 个答案: