为什么我的嵌套 div 内容在缩小,而 space 我没有声明出现在 div 容器之间?
Why is my nested div content shrinking and space I did not declare appearing between the div containers?
这是我的 html 文件:
<header >
<div id="ballo">
<div id="balloresize"> <img src="images/BAL.png" alt="" id="balloicresize"> <h2>Black Anthem LTD</h2> </div>
</div>
<div id="menus">
<div class="icir">
<img src="images/bmenu icon.png" alt="menu" class="icimg">
</div>
<div id="home">
<a href="https://www.blackanthemltd.site/"><h3>HOME</h3></a>
</div>
<div id="aut">
<a href="https://www.blackanthemltd.site/About"><h3>ABOUT</h3></a>
</div>
<div id="serv">
<a href="https://www.blackanthemltd.site/Services"><h3>SERVICES</h3></a>
</div>
<div id="proj">
<a href="https://www.blackanthemltd.site/Projects"><h3>PROJECTS</h3></a>
</div>
<div id="gal">
<a href="https://www.blackanthemltd.site/Gallery"><h3>GALLERY</h3></a>
</div>
<div id="raq">
<a href="https://www.blackanthemltd.site/RAQ"><h3>REQUEST A QUOTE</h3></a>
</div>
</div>
</header>
和 css:
*{
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
text-decoration: none;
}
html,body{
width:100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
header{
display: grid;
grid-template-columns: repeat(2, auto);
grid-template-rows: auto;
width: 100%;
column-gap: 0%;
background: #fff;
}
#ballo{
grid-column: 1/2;
}
#balloresize{
width: 50%;
height: 30%;
display: flex;
flex-flow: row;
flex-wrap: nowrap;
justify-content: space-between;
}
#balloicresize{
max-width: 100%;
box-sizing: border-box;
}
#menus{
grid-column: 2/3;
display: flex;
flex-flow: row nowrap;
width: 50%;
justify-content: space-evenly;
}
这是我得到的输出:
image of the undesired output I'm getting
不知道为什么在header标签#fsect和#menus下的两个parentdiv之间有space而且内容也无法正常获取spaced。请帮我解决这个问题,我已经尝试了所有我知道的。
无论我尝试什么,两个 div 之间的 space 都不会消失,内容也会保持收缩在一起。 html 已正确呈现,但 css 未按我希望的方式工作。
这是我希望 header 的排列方式:
The header of this picture is the design I want to get on my css
请帮忙!
我建议将您的 header 更改为 flex-box,除非您有特定原因需要使用网格。以下样式变化:
header {
width: 100%;
background: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#ballo, #menus {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
display: flex
表示此元素将是 flex-container.
flex-direction
指定我们是在行还是列中布置 children。你的 header 是一行。
justify-content
指定 flex-container 将如何沿其 main-axis 为其 children 分配 space(其 main-axis 是一行您为 flex-drection
指定 'row',当您指定 'column' 时指定一列)。 space-between
将最大化元素之间的白色数量space。您可能更喜欢 space-around
.
align-items
指定 flex-container 将如何沿其相反的轴对齐项目(无论上面轴的相反方向是什么)。如果您想将项目大致放置在 header 的 'center' 垂直方向,根据您的示例看起来就是这种情况,那么您需要此处的值 'center'。
移动那个内部的外部 div:
<div id="ballo">
<img src="images/BAL.png" alt="" id="balloicresize">
<h2>Black Anthem LTD</h2>
</div>
dividual 菜单项之间的间距仍然不理想,您可以使用您选择的填充值来解决这个问题。
我会暂时删除或注释掉您的其他 css 类,看看上面的内容对您有何帮助。然后根据需要添加内容。
这是我的 html 文件:
<header >
<div id="ballo">
<div id="balloresize"> <img src="images/BAL.png" alt="" id="balloicresize"> <h2>Black Anthem LTD</h2> </div>
</div>
<div id="menus">
<div class="icir">
<img src="images/bmenu icon.png" alt="menu" class="icimg">
</div>
<div id="home">
<a href="https://www.blackanthemltd.site/"><h3>HOME</h3></a>
</div>
<div id="aut">
<a href="https://www.blackanthemltd.site/About"><h3>ABOUT</h3></a>
</div>
<div id="serv">
<a href="https://www.blackanthemltd.site/Services"><h3>SERVICES</h3></a>
</div>
<div id="proj">
<a href="https://www.blackanthemltd.site/Projects"><h3>PROJECTS</h3></a>
</div>
<div id="gal">
<a href="https://www.blackanthemltd.site/Gallery"><h3>GALLERY</h3></a>
</div>
<div id="raq">
<a href="https://www.blackanthemltd.site/RAQ"><h3>REQUEST A QUOTE</h3></a>
</div>
</div>
</header>
和 css:
*{
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
text-decoration: none;
}
html,body{
width:100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
header{
display: grid;
grid-template-columns: repeat(2, auto);
grid-template-rows: auto;
width: 100%;
column-gap: 0%;
background: #fff;
}
#ballo{
grid-column: 1/2;
}
#balloresize{
width: 50%;
height: 30%;
display: flex;
flex-flow: row;
flex-wrap: nowrap;
justify-content: space-between;
}
#balloicresize{
max-width: 100%;
box-sizing: border-box;
}
#menus{
grid-column: 2/3;
display: flex;
flex-flow: row nowrap;
width: 50%;
justify-content: space-evenly;
}
这是我得到的输出: image of the undesired output I'm getting
不知道为什么在header标签#fsect和#menus下的两个parentdiv之间有space而且内容也无法正常获取spaced。请帮我解决这个问题,我已经尝试了所有我知道的。 无论我尝试什么,两个 div 之间的 space 都不会消失,内容也会保持收缩在一起。 html 已正确呈现,但 css 未按我希望的方式工作。 这是我希望 header 的排列方式: The header of this picture is the design I want to get on my css
请帮忙!
我建议将您的 header 更改为 flex-box,除非您有特定原因需要使用网格。以下样式变化:
header {
width: 100%;
background: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#ballo, #menus {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
display: flex
表示此元素将是 flex-container.
flex-direction
指定我们是在行还是列中布置 children。你的 header 是一行。
justify-content
指定 flex-container 将如何沿其 main-axis 为其 children 分配 space(其 main-axis 是一行您为 flex-drection
指定 'row',当您指定 'column' 时指定一列)。 space-between
将最大化元素之间的白色数量space。您可能更喜欢 space-around
.
align-items
指定 flex-container 将如何沿其相反的轴对齐项目(无论上面轴的相反方向是什么)。如果您想将项目大致放置在 header 的 'center' 垂直方向,根据您的示例看起来就是这种情况,那么您需要此处的值 'center'。
移动那个内部的外部 div:
<div id="ballo">
<img src="images/BAL.png" alt="" id="balloicresize">
<h2>Black Anthem LTD</h2>
</div>
dividual 菜单项之间的间距仍然不理想,您可以使用您选择的填充值来解决这个问题。
我会暂时删除或注释掉您的其他 css 类,看看上面的内容对您有何帮助。然后根据需要添加内容。