无论如何，div上的CSS都无法正常工作

时间：2016-07-10 03:06:10

标签： html css

我最近在编写一个网站，我一直试图将网站的所有主要信息都放到一个1068像素宽的容器中。为此，我创建了一个名为＆＃39; wrapper＆＃39;并将所有主要代码放入其中，但样式代码似乎根本不起作用。我试图找到一种方法，使所有页面主要信息中心本身的宽度为1068px，并将所有代码放入一个div似乎没有用。如果您知道修复或其他方式，请告诉我。例如，我希望我的所有信息都符合设置宽度，例如＆＃34; http://dubbedcrazy.net/＆＃34;

这里是html 

   <!Doctype html>
<html>
    <head>
        <title>Slide Out Menu</title>
        <link rel="stylesheet" href="./styles/main.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body class="menu menu-open">
        <header>
            <a href="#" class="menu-toggle"><img src="./images/toggle-button.png"></a>
            <nav class="menu-side">
        <img src="./images/hackedroms-title.png">
        <ul>
          <li><a href="#">Rom List</a></li>
          <li><a href="#">Submit Roms</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">FAQ/How to Use</a></li>
        </ul>
            </nav>
        </header>
        <div id="wrapper" style="width:1068px;overflow:hidden;">
            <div class="left-side">

                <a href="#"><div class="ongoing-post">
                    <div class="ongoing-data">
                    </div>
                </div></a>

                <a href="#"><div class="ongoing-post">
                    <div class="ongoing-data">
                    </div>
                </div></a>

            </div>
            <div class="right-side">

                <a href="#"><div class="ongoing-post">
                    <div class="ongoing-data">
                    </div>
                </div></a>

                <a href="#"><div class="ongoing-post">
                    <div class="ongoing-data">
                    </div>
                </div></a>

            </div>
        </div>


            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script>
                (function() {
                    var body = $('body');
                    $('.menu-toggle').bind('click', function() {
                        body.toggleClass('menu-open');
                        return false;
                    })
                })();
            </script>
    </body>
</html>

这里是css 

body {
  background-image: url("../images/background.jpg");
}

.menu {
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.menu-open {
  left: 231px;
}

.menu-open .menu-side {
  left: 0;
}

.menu-side, .menu {
  -webkit-transition: left 0.2s ease;
  -moz-transition: left 0.2s ease;
  transition: left 0.2s ease;
  font-family: fantasy;
}

.menu-side {
  background-color: #333;
  border-right: 1px solid #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: -231px;
  width: 210px;
  height: 100%;
  padding: 10px;
}

.menu-side img {
  width: 100%;
  padding: 3px;
}

.menu-toggle {
  color: black;
}

.menu-toggle img {
  width: 60px;
}

ul li {
  list-style: none;
  margin-bottom: 10%;
}

ul li a {
  text-decoration: none;
  color: white;
  font-size: 25px;
}

ul li a:hover {
  color: green;
}

.left-side {
  left: 0px;
  position: absolute;
  width: 43%;
  padding-left: 5%;
}

.right-side {
  right: 0px;
  position: absolute;
  width: 43%;
  padding-right: 5%;
}

.ongoing-post {
  overflow:hidden;
  margin-bottom:10px;
  background:gray;
  box-shadow:inset -1px -1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:inset -1px -1px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow:inset -1px -1px 2px rgba(0,0,0,0.2);
  -webkit-border-bottom-right-radius:4px;
  -webkit-border-bottom-left-radius:4px;
  -moz-border-radius-bottomright:4px;
  -moz-border-radius-bottomleft:4px;
  border-bottom-right-radius:4px;
  border-bottom-left-radius:4px;
  padding:7px;
  -webkit-transition:0.35s;
  -moz-transition:0.35s;
  -ms-transition:0.35s;
  -o-transition:0.35s;
  height: 130px;
}

.ongoing-post:hover {
  background:#F9F9F9;
}

.ongoing-image {
  float:left;
  margin-right:5px;
}

.ongoing-data {
  float:left;
  width:78%;
}

.ongoing-data h2,.ongoing-data h2 a {
  margin:0 0 7px 0;
  text-decoration:none;
  padding:0;
  font-size:13.3px;
  width:100%;
}

.ongoing-data h2 a:hover {
  color:#FFC2A3;
}

.ongoing-release {
  font-size:12px;
  width:100%;
  margin-bottom:7px;
}

.ongoing-release a {
  color:#4B5056;
  width:100%;
}

.ongoing-release a:hover {
  color:#818489;
}

.ongoing-type,.ongoing-type a {
  color:#98CC54;
  font-size:12px;
  width:100%;
}

.ongoing-type a:hover {
  color:#B7DB87;
}

4 个答案:

答案 0 :(得分：1)

添加＆＃34;保证金：自动;＆＃34;到您的包装器。

答案 1 :(得分：0)

尝试位置：相对，这样你的＃右侧将基于此容器

#wrapper {
   width:1068px;
   position:relative;
}

答案 2 :(得分：0)

我看到你使用的位置是：绝对的.left-side和.right-side。为此，您需要一个位置为relative的父容器。

尝试从

修改代码

＆＃13;
＆＃13; 
<div id="wrapper" style="width:1068px;overflow:hidden;"></div
＆＃13;
＆＃13;
＆＃13;

对于以下代码，请记住删除overflow：hidden;

＆＃13;
＆＃13; 
<div id="wrapper" style="width:1068px;position:relative;"></div
＆＃13;
＆＃13;
＆＃13;

这是一个简单的网格容器，有2列，所以我建议您使用Bootstrap库而不是当前的方法。

答案 3 :(得分：0)

<html>
<style>
.menu {
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.menu-open {
  left: 231px;
}
.menu-open .menu-side {
  left: 0;
}

.menu-side, .menu {
  -webkit-transition: left 0.2s ease;
  -moz-transition: left 0.2s ease;
  transition: left 0.2s ease;
  font-family: fantasy;
}

.menu-side {
  background-color: #333;
  border-right: 1px solid #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: -231px;
  width: 210px;
  height: 100%;
  padding: 10px;
}

.menu-side img {
  width: 100%;
  padding: 3px;
}

.menu-toggle {
  color: black;
}

.menu-toggle img {
  width: 60px;
}
ul li {
  list-style: none;
  margin-bottom: 10%;
}

ul li a {
  text-decoration: none;
  color: white;
  font-size: 25px;
}

ul li a:hover {
  color: green;
}

.wrapper{
    width: 1068px;
    height: 100%;
    padding: 0px;

    position: relative;
}

.left-side {
  left: 0px;
  position: absolute;
  width: 43%;
  padding: 3%;
}

.right-side {
  right: 5%;
  position: absolute;
  width: 43%;
  padding: 3%;
}

.ongoing-post {
  overflow:hidden;
  margin-bottom:10px;
  background:gray;
  box-shadow:inset -1px -1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:inset -1px -1px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow:inset -1px -1px 2px rgba(0,0,0,0.2);
  -webkit-border-bottom-right-radius:4px;
  -webkit-border-bottom-left-radius:4px;
  -moz-border-radius-bottomright:4px;
  -moz-border-radius-bottomleft:4px;
  border-bottom-right-radius:4px;
  border-bottom-left-radius:4px;
  padding:7px;
  -webkit-transition:0.35s;
  -moz-transition:0.35s;
  -ms-transition:0.35s;
  -o-transition:0.35s;
  height: 130px;
}

.ongoing-post:hover {
  background:#F9F9F9;
}

.ongoing-image {
  float:left;
  margin-right:5px;
}

.ongoing-data {
  float:left;
  width:78%;
}

.ongoing-data h2,.ongoing-data h2 a {
  margin:0 0 7px 0;
  text-decoration:none;
  padding:0;
  font-size:13.3px;
  width:100%;
}

.ongoing-data h2 a:hover {
  color:#FFC2A3;
}

.ongoing-release {
  font-size:12px;
  width:100%;
  margin-bottom:7px;
}

.ongoing-release a {
  color:#4B5056;
  width:100%;
}

.ongoing-release a:hover {
  color:#818489;
}

.ongoing-type,.ongoing-type a {
  color:#98CC54;
  font-size:12px;
  width:100%;
}

.ongoing-type a:hover {
  color:#B7DB87;
}
</style>

<head>

</head>

<body class="menu menu-open">
        <header>
            <a href="#" class="menu-toggle"><img src="./images/toggle-off.png" style="width: 30px"></a>
            <nav class="menu-side">
        <img src="./images/VR1.png" style="width: 50px">
        <ul>
          <li><a href="#">Rom List</a></li>
          <li><a href="#">Submit Roms</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">FAQ/How to Use</a></li>
        </ul>
            </nav>
        </header>


<div class="wrapper">
                <div class="left-side">

                <a href="#"><div class="ongoing-post">
                    <div class="ongoing-data">
                    </div>
                </div></a>

                <a href="#"><div class="ongoing-post">
                    <div class="ongoing-data">
                    </div>
                </div></a>

            </div>
            <div class="right-side">

                <a href="#"><div class="ongoing-post">
                    <div class="ongoing-data">
                    </div>
                </div></a>

                <a href="#"><div class="ongoing-post">
                    <div class="ongoing-data">
                    </div>
                </div></a>

            </div>
</div>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script>
                (function() {
                    var body = $('body');
                    $('.menu-toggle').bind('click', function() {
                        body.toggleClass('menu-open');
                        return false;
                    })
                })();
            </script>
</body>

</html>

这应该满足您的需求。我恳请你看一下bootstrap。它令人惊叹并减少了我们的大量工作量。

相关问题
最新问题