gpt4 book ai didi

css - DIV 溢出 :auto percentage width using content and not parent to set width

转载 作者:行者123 更新时间:2023-11-28 15:23:49 26 4
gpt4 key购买 nike

我有一个 DIV,如下所示,并且应用了以下类。我希望包装器 DIV 在必要时滚动并适合 100% 的屏幕宽度。我看到的问题是,当我将包装器 DIV 设置为 width: 100% 时,它使用的是内容的宽度,而不是父元素的宽度。

有问题的包装器 DIV 是 #pageContent_headingsWrapper。在智能手机的小视口(viewport)上,width: 100% 会扩展到屏幕之外并使页面变得非常大。我不知道为什么。

有什么想法吗?

此外,我想要在 pageContent_headings 中水平放置一行框。为了让行内 block 元素位于一条水平线上,我必须将 pageContent_headings 的宽度设置为大约 800 像素,然后使 pageContent_headingsWrapper 成为相同的宽度,而不是父元素。

<div id="pageContentWrapper" class="default">
<div id="pageContentWrapperCell">
<div id="pageContent_headingsWrapper">
<div id="pageContent_headings"></div>
</div>
<div id="pageContent_content"></div>
</div>
</div>

大视口(viewport)的 CSS:

#pageContentWrapper.default {
display: none;
}

#pageContentWrapper.show {
display: table;
height: 100%;
width: 100%;
color: black;
font-family: 'Cloister Black';
}

#pageContentWrapperCell {
display: table-cell;
position: relative;
height: 100%;
width: 100%;
vertical-align: middle;
text-align: center;
}

#pageContent_headingsWrapper {
position: relative;
margin-bottom: -75px;
text-align: center;
border: red 1px solid;
}

.pageContent_headerBox {
display: inline-block;
height: 100px;
width: 150px;
background-color: white;
margin: 10px;
border: 2px #CCCCCC solid;
color: black;
cursor: hand;
cursor: pointer;
}

.pageContent_headerBox_selected {
display: inline-block;
height: 100px;
width: 150px;
background-color: black;
margin: 10px;
border: 2px white solid;
color: white;
cursor: hand;
cursor: pointer;
}

.pageContent_headerBox_label {
color: inherit;
font-size: 18pt;
margin: 0px;
padding: 0px;
}

.pageContent_headerBox_price {
color: inherit;
font-size: 14pt;
margin: 0px;
padding: 0px;
}

#pageContent_title {
width: 100%;
text-align: center;
}

#pageContent_content {
padding: 10px;
display: block;
min-height: 500px;
width: 75%;
margin: 15px auto;
background-color: white;
color: black;
font-family: 'Cloister Black';
font-size: 14pt;
text-align: center;
padding-top: 50px;
}

#pageContent_content p {
margin: 0px;
padding: 0px;
}

.pageContent_text {
display: block;
opacity: 1;
position: relative;
margin-top: 5px;
}

小视口(viewport)的 CSS:

#pageContent_wrapper.show {
margin-top: 30px;
}

#pageContent_headingsWrapper {
height: 100px;
min-height: 100px;
max-height: 100px;
width: 100%;
min-width: 200px;
max-width: 100%
text-align: center;
overflow: auto;
}

#pageContent_headings {
min-width: 250px;
border: 1px green solid;
}

.pageContent_headerBox {
display: inline-block;
height: 100px;
width: 150px;
background-color: white;
margin: 10px;
border: 2px #CCCCCC solid;
color: black;
cursor: hand;
cursor: pointer;
}

.pageContent_headerBox_selected {
display: inline-block;
height: 100px;
width: 150px;
background-color: black;
margin: 10px;
border: 2px white solid;
color: white;
cursor: hand;
cursor: pointer;
}

最佳答案

使用 width:auto 代替 width:100%

关于css - DIV 溢出 :auto percentage width using content and not parent to set width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29639843/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com