标签: positioning

CSS - 在左下角放置一个div

我希望我是一个聪明的CSS ....

如何在网页的左下角放置一个div容器; 考虑到用户滚动位置？

html css positioning

dea*_*bug

2016 03-04

27
推荐指数

1
解决办法

4万
查看次数

如何在保持垂直位置的同时使div与父级的右侧对齐？

请参考我绘制的这个方便的图表:

div1的身高不明.div3宽度是流动的; 它永远不应该重叠div2.二者div1并div2具有相同的宽度,并通过在水平方向为中心margin: auto.我如何定位,div3以便在与... 共享垂直位置时与右侧body(无论多宽body)对齐div2？(使用CSS)

css positioning vertical-alignment

sbi*_*nko

2017 09-01

26
推荐指数

3
解决办法

8万
查看次数

如何均匀分隔许多内联块元素？

是否可以在宽度可变的div中均匀地分隔多个元素.

这里没有工作的例子.如果我们使用text-align:center; 元素将居中,但边距:0自动; 不管用.我想完成像justify + center这样的事情:

|..<elem>..<elem>..<elem>..<elem>..|       // for one container width
|..<elem>..<elem>..<elem>..|               // for smaller container width
|....<elem>....<elem>....|                 // even smaller container

Run Code Online (Sandbox Code Playgroud)

容器将是用户可调整大小的.一张图片胜过1000字:

在此输入图像描述

容器(红盒)宽度:100%; 所以用户可以调整它的大小(浏览器窗口,js,等等).
< - >表示偶数空格.在第二行< - >更大,因为有更多的空间.我能够伪造它:

text-align:center;
word-spacing:3em;    // but any fixed value looses proportion

Run Code Online (Sandbox Code Playgroud)

html css positioning

CoR*_*CoR

2013 06-07

26
推荐指数

1
解决办法

3万
查看次数

3列,中间一列,宽度灵活

我想要一个由三个相邻div组成的布局.边div具有静态宽度(可以通过javascript更改)并且中心div填充剩余区域.当第一个div的大小改变时,它只影响中心的大小.它类似于由三列组成的表(带有动态渲染).

好的,问题出在哪里.问题是,如果我将浮动左div放入第一列,并在第二列和第三列中阻塞div,则块div以奇怪的方式运行.它们在第一列浮动div下方的列中呈现.

一个例子.在第一列和第二列中,我有浮动div,并在第三列中有块div.块div在浮动div的高度附近向下移动.中间列中的Div不会在其y位置移动,只是它具有浮动左侧属性.

我希望三个布局div中的每一个都相互独立.我不知道为什么第三列中的元素在前两列中浮动div(使用float属性).

码:

<div style="margin: auto; display: table; width: 260px;">
        <div style="display: table-row;">
            <div style="display: table-cell; width: 100px;">

                <div style="float: left; width: 40px; height: 50px;">COL1</div> 

            </div>
            <div style="display: table-cell;">

                <div style="float: left; height: 50px;  width: 40px;">COL2</div>

            </div style="display: table-cell; width: 100px;">
            <div class="sideContainer">

                <div>COL3</div>

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

Run Code Online (Sandbox Code Playgroud)

结果: 结果

如何解决这个问题.如何使所有布局div(列)彼此独立.有任何想法吗？

css positioning css-float css-tables

car*_*_20

2012 05-23

25
推荐指数

1
解决办法

3万
查看次数

HTML <div>使用CSS的自相矛盾的效果

我被困在这里.请帮忙.我想通过CSS进行以下操作.

但是当我使用CSS定位时,我得到了这个输出在此输入图像描述

第四个(绿色)层应该在第一层(蓝色)下面,这不会发生.这是我使用的代码.

HTML:

<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>

Run Code Online (Sandbox Code Playgroud)

CSS:

div{
height:100px;
width:100px; 
border:solid 1px;
}

.box1{
position:relative;
left:500px;
background-color:#00d8ff;
}

.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
}

.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
}

.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
}

Run Code Online (Sandbox Code Playgroud)

JSFiddle:http://jsfiddle.net/rkubs/

甚至我试图使用Z-index.但没用.帮我.提前致谢.

html css positioning css-position

rag*_*999

2014 03-25

25
推荐指数

2
解决办法

1087
查看次数

CSS min-width属性不起作用

我有以下问题:
我有div包含其他元素,我尝试使其宽度取决于内容.我也限制了这个div的最大宽度.我用min-width与max-width在CSS,但似乎min-width不工作.max-width无论内容是什么,div的宽度始终是值.

例:

我想把白色div(这是主要的div,我正在谈论)严格地围绕着它的形式,在左侧和右侧没有空的空间.我给出了表单样式max-width:500px,表明即使内容很小,主要div保持不变.

HTML

<div class="gInnerBox sInnerBoxMain">
    <form style="max-width:500px; margin-left: auto; margin-right: auto">            
        <div id='content'>
                   <!-- CONTENT -->
        </div>
    </form>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS

.gInnerBox{
    position: relative;
    background-color: #fff;
    opacity: 0.9;
    padding: 10px 10px 10px 10px;    

    box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
    -moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
    -webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;

    border: 1px solid #000;
    border-radius: 20px;
    -moz-border-radius: 20px; …

Run Code Online (Sandbox Code Playgroud)

html css positioning

viz*_*oom

2019 08-15

24
推荐指数

1
解决办法

5万
查看次数

将边框宽度限制为块元素中的文本宽度

我有<h2>一个固定的标题<div>(238px).呈现此页面时,浏览器管理行中断标题以使文本适合宽度(238px).

但是h2元素的width属性仍然是238px,不管断行是什么.

我想border-bottom在文本下面设置一个,而不是在h2元素的全宽下,我不知道如何使用CSS实现这一点.

你可以在这里看到我的意思:http://jsfiddle.net/np3rJ/2/

谢谢

css positioning css-float

Vin*_*nce

2013 05-06

24
推荐指数

4
解决办法

5万
查看次数

html <input>元素忽略CSS左+右属性？

我注意到<input>HTML 中的元素忽略了"左"和"右"属性的CSS对.对于"顶部"和"底部"对相同.请参阅以下示例代码:

<html>
    <head>
        <style><!--
        #someid {
            position: absolute;
            left: 10px;
            right: 10px;
            top: 10px;
            bottom: 10px;
        }
        --></style>
    </head>
    <body>
        <input type="text" id="someid" value="something"/>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

它<input>应占据浏览器中几乎所有空间(除了它周围10px的边框).它在Safari中运行良好,但在FireFox和IE <input>中,它在浏览器的左上角保持较小.

如果我使用"left"和"width","top"和"height",那么一切正常.但是我不知道宽度和高度是多少,我希望它们根据浏览器窗口的大小进行调整.

任何想法如何解决这个问题？

谢谢.

html css positioning input

Gab*_*iel

lucky-day

22
推荐指数

2
解决办法

2万
查看次数