Question

有没有办法让div只使用CSS而不知道div的宽度？＃/ p>出现在屏幕外的一半

Answer 1

除非我误解了这个问题，否则我认为可以使用CSS，因为我希望this jsfiddle能够明白这一点。

示例HTML

<div class="container one">
   <div class="half">Hello there.</div>
</div>
   <div class="container two">
<div class="half">Hello there, you old dog.</div>
   </div>
<div class="container three">
   <div class="half">Hello there you old dog. Been up to your old tricks?</div>
</div>

CSS

.container {
    position: absolute;
}
.half {
    position: relative;
    right: 50%;
}
.two {
    top: 30px;
}
.three {
    top: 60px;
}

Answer 2

实际上，没有。

div将它的顶部定位在屏幕的50％处......如果您知道高度或多或少的高度，您可以假设“有点”的值使其看起来像在中间之前的div。但简而言之，没有。

仅限表格或Javascript。

Answer 3

我从jQuery做了些什么。希望你追求的是什么 - http://jsfiddle.net/6Guc8/1/。它获得元素宽度的一半，然后将其中的一半从屏幕中取出。

这是jquery

$(document).ready(function(){
    var half_width = $("div").width() / 2;
    $("div").css("left", -half_width);
});

这是css

div{
    background: #555;
    height: 100px;
    width: 100px;  
    position: absolute;
}

这是html

<!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript">          </script>
</head>

<body>
    <div>
    </div>
</body>

</html>

Answer 4

只能在CSS中使用。但是你需要1个包装器div：

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        div#wrapper {
            position: absolute;
            left: 0;
        }
        div#wrapper div {
            position: relative;
            padding: 30px;
            background: yellow;
            left: -50%;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div>this div is halfway hidden, no matter what size it is.</div>
    </div>
</body>

</html>

使Div出现在屏幕外的一半

4 个答案: