Question

我的问题是我试图将div放在我的全角标题中，如下所示：

</body>
<!-- the CSS -->
#header {
margin-top: -1em;
margin-left: -1em;
height: 2.95em;
padding:15px 0;
min-width:150%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;

}
#insideHeader {

border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}

此代码的结果位于here。

提前致谢。

Answer 1

min-width:100%;似乎把你的div放在中心......

body {
    background-color: red;
    margin: 0;
}
#header {
    margin: 0;
    height: 2.95em;
    padding:15px 0;
    min-width:100%;
    background-color: #F4F6F7;
    border: 1px solid #E1E1E1;
}
#insideHeader {
    border: 1px solid black;
    width: 20em;
    height: 2.6em;
    margin: 0 auto;
}

<body>
    <div id="header">
        <div id="insideHeader"></div>
    </div>
</body>

或 http://jsfiddle.net/x1b7zpy4/1/

Answer 2

根据我的理解，你试图在窗口中安装外盒并将中心对齐内盒。

添加/更新以下样式

    p1 = new Path(new MoveTo(400, 360),
            new HLineTo(240),
            new VLineTo(500),
            new HLineTo(340),
            new VLineTo(680),
            new HLineTo(40),
            new VLineTo(560),
            new HLineTo(120),
            new VLineTo(240),
            new HLineTo(360),
            new VLineTo(40),
            new HLineTo(40),
            new VLineTo(180),
            new HLineTo(180),
            new VLineTo(100)
            );

    p1.setStroke(Color.BLACK);
    p1.setStrokeWidth(4);

    p2 = new Path(new MoveTo(800,40),
            new VLineTo(680),
            new HLineTo(40),
            new VLineTo(40),
            new HLineTo(800)
            );

    p2.setStroke(Color.YELLOW);
    p2.setStrokeWidth(4);
        Duration numSECP1 = Duration.valueOf("6.5s");//was 8.5
    //animP1 = new PathTransition(numSECP1,s1,cp1);
    animP1 = new PathTransition(numSECP1, p1, cp1);
    animP1.setOrientation(OrientationType.NONE);
    animP1.setInterpolator(Interpolator.LINEAR);
    animP1.setDelay(Duration.seconds(4.5));
    animP1.setAutoReverse(true);
    animP1.setCycleCount(Timeline.INDEFINITE);

    Duration numSECP2 = Duration.valueOf("6.5s");//was 8.5
    animP2 = new PathTransition(numSECP2,p2,cp2);
    animP2.setOrientation(OrientationType.NONE);
    animP2.setInterpolator(Interpolator.LINEAR);
    //animP2.setDelay(Duration.seconds(1));
    animP2.setAutoReverse(true);
    animP2.setCycleCount(Timeline.INDEFINITE);

浏览器有默认的填充/边距。你需要覆盖那些以适合你的外盒。

一旦你这样做，你需要删除你的负左边距，以便使盒子粘在窗口的边界上。

然后将宽度设置为100％。

供参考 - http://jsbin.com/lomeganori/1/edit?html,css,output

Answer 3

给

   #header
    {
    box-sizing: border-box;
   //and remove height:2.5rem;
   }

box-sizing：borderbox将删除你所有的麻烦，并且不给父母高度

将自动获取内部div的高度

Div试图居中但不起作用

3 个答案: