Question

这是代码。测试＆＃34;新代码的那个蓝色div在这里？＆＃34;是我试图正确排队的那个人。

我试图放置这个div，使其顶部与div左侧的顶部完全对齐，如下所示：http://i.imgur.com/3gDhrqs.png

任何帮助表示赞赏。不知道为什么这看起来很难。

HTML：

<!DOCTYPE html>
<!--

-->
<html lang="en">
    <head>               
        <link type="text/css" rel="stylesheet" href="css/styletime.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/init.js"></script>      
    </head>


    <body>
         <section id="heady">
            <div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b><a href="index.html">Site</b></a></p></div>

            <div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">    
                    <a href="index.html">Home</a> | 
                    <a href="index.html">Generic</a> |
                    <a href="index.html">Elements</a> |
                    <a href="index.html">Sign Up</a>
            </div>


        </section>

        <section id="wrapper">
            <br><br>
            <img src="images/blacksquare.png" width="525" height="197"></img>

            <br><br><br>


            <div>




                <div style="vertical-align:top;display:inline-block;float:left;">        
                    <ul class="navbar cf">
                        <!-- <li><a href="#">item 2</a></li> -->
                        <li style="width:200px;">
                            <a href="#" class="ActiveListItem">Category</a>
                            <ul>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">6</a></li>
                                <li><a href="#">7</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>                                                               



                <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
                    <form action="">
                        <input type="text" id="todo" placeholder="Enter a To-do and hit enter" autocomplete="off">
                    </form>


                    <!-- <ul class="active">
                        <li>Work <a href="">X</a></li>
                        <li>Sleep <a href="">X</a></li>
                        <li>Repeat <a href="">X</a></li>
                    </ul> -->

                </div>





                <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
                    <ul class="active">
                        <!--
                        <li>Work <a href="">X</a></li>
                        <li>Sleep <a href="">X</a></li>
                        <li>Repeat <a href="">X</a></li>
                        -->
                    </ul>
                </div>



            </div> 

            <div style="float:right;vertical-align:top;width:450px;height:800px;background:blue;margin:0 0 0 0;">
                New div goes here??  
            </div>  


        </section>



        <section id="feety">
        I believe I exist
        </section> 




    </body>


</html>

CSS

/*adder*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);


 * {
    padding:0;
    margin:0;
}


html {
 background:teal;
}


body {
    /*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}


a {
    color: #D9D9D9;
    text-decoration: none;
}
a:active, a:hover {
    text-decoration: underline;
}



#heady {
    text-align: center;
    width:100%;
    height:75px;
    background-color:#222222;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:white;
    position:relative; 
}

#wrapper {
    text-align: center;
    width:1000px;
    height:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:teal;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    position:relative; 
}


#feety {
    text-align: center;
    width:100%;
    height:100px;
    background-color:darkslateblue;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:white;
    position:relative; 
}










/* clearfix */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
   * zoom: 1;
}


ul.navbar {

  background:white; 
  border-style:solid;
  border-color:#ccc;
  border-width:1px; 
  width: 132px;
  border-radius: 4px;
  margin-left:10px;
  margin-right:5px;
  font-size:14px;
  height:33px;


}



.ActiveListItem:after {
    content: "\25BC\00a0\00a0";                        /*carat and spaces*/ 
    float:right;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:17px;             /*keeps carat in center of text*/ 
}  



ul.navbar li a.ActiveListItem {
    background:white !important;
    color:black;
    padding:3px 5px !important; 
    font-weight:normal !important;
    margin-left:14px;/* got the activeitem centered with the list text this way*/
    margin-right:0px;
    margin-top:5px;
    margin-bottom:6px;
    width:100px;

}

ul.navbar li {
    position: relative;
    width:130px;
}

ul.navbar li a {
    display: block;
    color: white;
    padding:10px 5px;
    text-decoration:none;
    transition: all .2s ease-in;

}

ul.navbar li a:hover,
ul.navbar li:hover > a {
    background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
    color: #333;
    font-weight:900;

}

    ul.navbar li ul {
        margin-top: 1px;
        position: absolute;
        background: #222;
        font-size: 14px;
        /* min-width: 200px; */
        display: none;
        z-index: 99;
        box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
        0 5px 10px rgba(0,0,0,.6);
    }

ol, ul { list-style: outside none none; }

.hidden { display: none; }







/*Lister*/



.container {
    width: 60%;
    margin: 0px auto;
}

form {  }

.lister input, ul {
    background: #eee;
    border-radius: 5px;
    /* width: 100%; */
    box-sizing: border-box;
    font-family:"Tahoma";

}

.lister input {
    width:300px;   /*width of todo input box*/
    height:33px;
    padding: 10px 10px 10px 20px;
    border: 1px solid #ccc;
    float:left;
    margin-bottom:20px;
    font-size:14px;
}

.lister ul {
    /*list-style: square inside;*/
    padding: 10px; /* padding for outside area of list*/
    width:447px;
}

.active { border: 1px solid #ccc; }

.inactive { display: none; }

.lister li {
    padding: 10px; /*controls height of list items*/
    font-size:16px; /*font size of list items*/
    font-weight: 600;
    color: #34495e;
    text-align:left;
}


.lister li:nth-child(odd) {
    background: #dadfe1;
    border-radius: 5px;
}

.lister li > a {
    float: right;
    text-decoration: none;
    color: #22313f;
    font-weight: bold;
    transition: all .2s ease-in-out;
}

.lister li > a:hover {
    font-size: 110%;
    color: #c0392b;
}


/*.lister li:before {
    content: "";                        
    float:right;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:20px;             
}


.CategoryIcon {
    float:right;
    color:red;
    padding:40px 40px;
} */

Answer 1

试试这个:(更新PEN）

<!DOCTYPE html>
<!--

-->
<html lang="en">
    <head>               
        <link type="text/css" rel="stylesheet" href="css/styletime.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/init.js"></script>      
    </head>


    <body>
         <section id="heady">
            <div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b><a href="index.html">Site</b></a></p></div>

            <div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">    
                    <a href="index.html">Home</a> | 
                    <a href="index.html">Generic</a> |
                    <a href="index.html">Elements</a> |
                    <a href="index.html">Sign Up</a>
            </div>


        </section>

        <section id="wrapper">
            <br><br>
            <img src="images/blacksquare.png" width="525" height="197"></img>

            <br><br><br>


            <div style="float: left; width: 50%;">




                <div style="vertical-align:top;display:inline-block;float:left;">        
                    <ul class="navbar cf">
                        <!-- <li><a href="#">item 2</a></li> -->
                        <li style="width:200px;">
                            <a href="#" class="ActiveListItem">Category</a>
                            <ul>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">6</a></li>
                                <li><a href="#">7</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>                                                               



                <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
                    <form action="">
                        <input type="text" id="todo" placeholder="Enter a To-do and hit enter" autocomplete="off">
                    </form>


                    <!-- <ul class="active">
                        <li>Work <a href="">X</a></li>
                        <li>Sleep <a href="">X</a></li>
                        <li>Repeat <a href="">X</a></li>
                    </ul> -->

                </div>





                <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
                    <ul class="active">
                        <!--
                        <li>Work <a href="">X</a></li>
                        <li>Sleep <a href="">X</a></li>
                        <li>Repeat <a href="">X</a></li>
                        -->
                    </ul>
                </div>



            </div> 

            <div style="float:right;vertical-align:top;width:450px;height:800px;background:blue;margin:0 0 0 0;">
                New div goes here??  
            </div>  


        </section>



        <section id="feety">
        I believe I exist
        </section> 




    </body>


</html>

Answer 2

向左侧div添加一列左列。然后做这个CSS：

.leftcolumn{
  width: 50%;
  float: left;
}

Answer 3

保存输入的主div可以给定一个类，并以设定的宽度浮动到左侧。

HTML：

<div class="inputs"></div>
<div style="float:right;vertical-align:top;width:450px;height:800px;background:blue;margin:0 0 0 0;">
New div goes here?? 
</div>

CSS：

.inputs {
   float: left;
   width: 400px;
 }

以下是fixed代码。

Answer 4

试试这个，

您应该从container

中删除<div class="lister">课程

并添加以下样式

.container {
    width: 50%;
    margin: 0px auto;
  float:left
}

Demo

不能把div放在我想要的地方吗？

4 个答案: