我有一个问题,我有一个flexbox,但我并不希望每个元素根据给定的属性间隔,所以我想玩边距.
我在框的顶部有一个标题,但我希望它与其余元素之间的间距.
所以我希望将我的p元素列表组合在一起但距离标题更远.
但是,当我这样做margin-bottom时没有效果(当我增加或减少margin-bottom任何变化时).
我最初是以百分比形式进行的,并将其更改为像素,但这似乎也不是问题.
在片段中我看起来没什么问题但是在更大的浏览器上,标题和p元素之间几乎没有任何空间是问题.
.container {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
min-height: 70vh;
width: 70%;
margin: 5% auto 8% auto;
background-color: white;
}
.container p {
margin-bottom: 2%;
}
.container h2 {
color: orange;
font-size: 34px;
}
.middle p:first-child {
margin-top: 8%;
}
.bspace {
margin-bottom: 50px;
}
.box h2 {
color: orange;
text-align: center;
}
.left {
display: flex;
flex-flow: row wrap;
align-items: center; …我设置了特定的宽度,我没有margin: auto在我的flex项目上,但由于某些原因这些属性没有按预期工作.
我只想在流浆箱和列表类之间进行间隔.
现在在我的com上,流浆箱居中,但在片段上没有,我不知道为什么,即使justify-content设置为居中.
但即使在我的电脑上align-items也不能正常工作.
我的意思是我知道它没有效果,但那就是只有一个项目.
我还评论了一些常见的嫌疑人,但这不起作用.
最后,right实际上是一个更大的容器div的一部分,但这应该是无关紧要的.如果你为整个片段做了一个完整的页面,你会看到我在说什么.
.right {
display: flex;
position: relative;
flex-flow: row wrap;
align-items: space-between;
justify-content: center;
// text-align: center;
order: 3;
//background: yellow;
flex: 1 50%;
height: 100%;
}
div.list {
display: flex;
flex-flow: row wrap;
width: 70%;
justify-content: center;
line-height: 300%;
border: 1px solid pink;
}
.right .headbox {
border-bottom: 1px solid orange;
width: 70%;
height: auto;
}
.right .list {
// text-align: center;
height: auto; …所以我面临一个小问题,根据align-itemsflexbox中的属性,图片没有移动,我不知道为什么.
align-items: flex-start当我将元素的宽度设置为35%,高度设置为100%时,它们就好像我已经应用了一样.
值得关注的是一个叫做的人'topi'.
总结一下我的目标布局(虽然它稍微不相关但可能有助于解决这个问题):
我想在父div中有两个父行.顶行有两个部分,我希望底部行有3个以上的部分列.
我只是不确定为什么图像没有移动.
我的意思是我制作了图像在flexbox中的div,虽然我认为这是无关紧要的,因为使'topi'类具有属性align-items: center/space-around,它应该在包含图像的div上工作.
我会认为图像随着div一起移动.
有人可以开导我这个吗？
PS topidiv规则是无用的,因为图像在div中,所以只需要一个规则即可topi,对吧？谢谢.
.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: space-around;
align-items: stretch;
height: 95vh;
width: 80%;
margin: 5% auto 8% auto;
background-color: white;
}
.top {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: center;
}
.bottom {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: flex-start;
}
.bottomi { …起初我的输入焦点工作得很好,现在突然间,当我为我的输入添加了几个样式时,它突然停止工作.我只添加了'input [type ="text"]和border-radius和padding以及它工作时的一些边距.当您单击每个表单元素时,即使我有一个焦点规则(您可以在代码底部附近找到),也没有任何反应.这有什么解决方法吗？
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input:focus {
border: 2px solid #862d59;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
//box-sizing: border-box;
}<div id="formholder1"> …很抱歉我尝试了一切，尝试了三十分钟却什么也没得到。好的，这是我的代码。由于某种原因，“div2”不起作用，也不能向下移动，但只能左右移动。我希望它能够从屏幕顶部或底部上下移动，但它只能左右移动，并且与导航栏位于同一水平面上
body {
background-color: LightGoldenRodYellow;
font-family:"Arial Black", Gadget, sans-serif;
}
#rightcolumn {
float: left;
margin-left: 100px;
}
#wrapper {
background-color: #33CC00;
color: #000066;
}
#midcolumn {
float: left;
width: 100px;
Margin: 15px;
}
#leftcolumn {
float: left;
width: 100px;
margin: 10px;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
.navbar {
text-decoration: none;
margin: 15px;
display: block;
}
.div2{
position:absolute;
float: left;
left: 200px;
margin-top:100px:
}
.title{
color: LightCoral;
position:absolute;
left: 50%;
top: 10%; …