Html div上的CSS无论如何都不起作用_Html_Css

Html div上的CSS无论如何都不起作用

html css

Html div上的CSS无论如何都不起作用,html,css,Html,Css,我最近一直在编写一个网站的代码，我一直在尝试将网站的所有主要信息放入一个1068px宽的容器中。为此，我创建了一个名为“wrapper”的div，并将所有主代码放入其中，但对代码进行样式化似乎根本不起作用。我试图找到一种方法，使所有的网页主信息中心本身的宽度为1068px，把所有的代码放在一个div似乎不工作。如果您知道修复方法或其他方法，请告诉我。例如，我希望我的所有信息都适合设置宽度，如“” 这是html <!Doctype html> <html> &

我最近一直在编写一个网站的代码，我一直在尝试将网站的所有主要信息放入一个1068px宽的容器中。为此，我创建了一个名为“wrapper”的div，并将所有主代码放入其中，但对代码进行样式化似乎根本不起作用。我试图找到一种方法，使所有的网页主信息中心本身的宽度为1068px，把所有的代码放在一个div似乎不工作。如果您知道修复方法或其他方法，请告诉我。例如，我希望我的所有信息都适合设置宽度，如“”

这是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>

试试position:relative，这样您的#右侧将基于此容器

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

将“margin:auto；”添加到包装器中

我看到您使用的是position:absolute，表示左侧和右侧。为此，需要一个位置为：relative的父容器

尝试从中修改代码


.菜单{
溢出x：隐藏；
位置：相对位置；
左：0；
}
.菜单打开{
左：231px；
}
.菜单打开.菜单侧{
左：0；
}
.菜单侧，.菜单{
-webkit过渡：左0.2秒；
-moz过渡：左0.2秒；
过渡：左0.2秒；
字体家族：幻想；
}
.菜单面{
背景色：#333；
右边框：1px实心#000；
颜色：#fff；
位置：固定；
排名：0；
左：-231px；
宽度：210px；
身高：100%；
填充：10px；
}
.菜单侧img{
宽度：100%；
填充：3倍；
}
.菜单切换{
颜色：黑色；
}
.菜单切换img{
宽度：60px；
}
ulli{
列表样式：无；
利润底部：10%；
}
ullia{
文字装饰：无；
颜色：白色；
字体大小：25px；
}
悬停{
颜色：绿色；
}
.包装纸{
宽度：1068px；
身高：100%；
填充：0px；
位置：相对位置；
}
.左侧{
左：0px；
位置：绝对位置；
宽度：43%；
填充：3%；
}
.右侧{
右：5%；
位置：绝对位置；
宽度：43%；
填充：3%；
}
.现有员额{
溢出：隐藏；
边缘底部：10px；
背景：灰色；
盒影：插入-1px-1px-2px rgba（0,0,0.2）；
-moz盒阴影：插入-1px-1px 2px rgba（0,0,0.2）；
-webkit盒阴影：插图-1px-1px 2px rgba（0,0,0.2）；
-webkit边框右下半径：4px；
-webkit边框左下半径：4px；
-moz边框半径右下角：4px；
-moz边框半径左下角：4px；
边框右下半径：4px；
边框左下半径：4px；
填充：7px；
-webkit转换：0.35s；
-moz跃迁：0.35s；
-ms转换：0.35s；
-o-转变：0.35s；
高度：130像素；
}
.进行中帖子：悬停{
背景#F9F9F9；
}
.持续图像{
浮动：左；
右边距：5px；
}
.持续数据{
浮动：左；
宽度：78%；
}
.持续数据h2，.持续数据h2 a{
边际：0.7px 0；
文字装饰：无；
填充：0；
字体大小：13.3px；
宽度：100%；
}
.正在进行的数据h2 a：悬停{
颜色：#FFC2A3；
}
.正在发布{
字体大小：12px；
宽度：100%；
边缘底部：7px；
}
.正在发布的版本a{
颜色：#4B5056；
宽度：100%；
}
.正在发布的版本a：悬停{
颜色：#818489；
}
.进行中类型，.进行中类型a{
颜色：#98CC54；
字体大小：12px；
宽度：100%；
}
.进行中类型a：悬停{
颜色：#B7DB87；
}






（功能（）{
变量body=$（'body'）；
$（'.menu toggle'）.bind（'click'，function（）{
body.toggleClass（“菜单打开”）；
返回false；
})
})();

这应该能满足你的需要。我希望你们能看看bootstrap。这真是太棒了，减少了我们的工作量。@omer我必须使用自己的图像，所以请根据需要编辑该部分和宽度
#wrapper {
   width:1068px;
   position:relative;
}

<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>