我正在尝试在网页上建立一个60/40拆分层，该页面的容器大小是根据其上方全尺寸层的最大容器宽度来计算的。我能够提取全宽度层的容器类的最大宽度值，然后使用一些Javascript操纵该数字以计算两个值（一个用于拆分层的左侧，一个用于右侧）然后使用jQuery将新计算出的最大宽度值应用于其相应的层。左侧的值是容器最大宽度的60％，左侧的值是容器最大宽度的40％。
这是我的代码：
HTML / JS / jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tier-one" class="full-width-tier">
<div class="main-text container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien metus, tristique et massa at, finibus fringilla mi. Vestibulum in semper eros. Nullam in ligula eros. Vivamus arcu risus, convallis sit amet diam eget, consequat hendrerit elit. Donec ac metus id arcu rhoncus sodales. Donec in justo sed mauris iaculis auctor sit amet ut neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec accumsan interdum elit, vitae euismod odio mollis vitae. Suspendisse arcu mi, rhoncus non tortor et, mattis efficitur ligula. Sed hendrerit nunc et condimentum fermentum. Nunc vel est non mauris sagittis dignissim. Duis placerat vehicula enim, a tincidunt dui rhoncus sit amet. Aenean sed semper leo. Suspendisse placerat dictum arcu vehicula dapibus. Vivamus et sem venenatis, placerat dolor ut, imperdiet dui. Vivamus sed tortor a massa fringilla tristique. Quisque vulputate ac risus eget tincidunt. Nullam a viverra ex.</p>
</div>
</div>
<div id="tier-two" class="flex-tier">
<div class="flex-col-1">
<div class="main-text container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna. Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.<p>
</div>
</div>
<!-- Left tier container max-width calculator -->
<script>
var flex_elem = document.querySelector('.container');
var flex_container_styles = getComputedStyle(flex_elem);
var flex_container_width = flex_container_styles.maxWidth;
var container_width_integer = parseInt(flex_container_width, 10);
var final_flex_60_width = container_width_integer * 0.6;
var final_flex_60_width_px = final_flex_60_width.toString() + "px";
</script>
<script>
function addSplitMaxWidth(media_query) {
if (media_query.matches)
$("#tier-two .flex-col-1 .container").css("cssText", "max-width: " + final_flex_60_width_px + " !important;");
}
var media_query = window.matchMedia("(min-width: 768px)")
addSplitMaxWidth(media_query) // Call listener function at run time
media_query.addListener(addSplitMaxWidth) // Attach listener function on state changes
</script>
<!-- End caculator -->
<div class="flex-col-2">
<div class="main-text container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec pulvinar turpis. Donec nec enim ultricies, ultrices libero ac, tincidunt nibh. In varius neque eu orci consequat, id vestibulum ex congue. Aliquam nulla sem, fermentum eget efficitur nec, gravida at risus. Phasellus molestie sit amet mauris interdum dapibus. Duis vehicula nulla sit amet dignissim tincidunt. Fusce pulvinar, magna sollicitudin sollicitudin pharetra, augue urna varius ex, a ullamcorper elit ante vehicula urna. Pellentesque aliquet posuere neque sed sodales. Nulla auctor magna eget nisi pulvinar sagittis. In a massa at tortor faucibus accumsan at eget nisl. Aliquam accumsan convallis ex et viverra. Pellentesque tempor turpis mi, sit amet tincidunt eros mattis et. Nullam sed ex non risus pulvinar euismod ut quis turpis. Proin ut vestibulum nunc.</p>
</div>
</div>
<!-- Right container max-width calculator -->
<script>
var flex_elem = document.querySelector('.container');
var flex_container_styles = getComputedStyle(flex_elem);
var flex_container_width = flex_container_styles.maxWidth;
var container_width_integer = parseInt(flex_container_width, 10);
var final_flex_40_width = container_width_integer * 0.4;
var final_flex_40_width_px = final_flex_40_width.toString() + "px";
</script>
<script>
function addSplitMaxWidth(media_query) {
if (media_query.matches)
$("#tier-two .flex-col-2 .container").css("cssText", "max-width: " + final_flex_40_width_px + " !important;");
}
var media_query = window.matchMedia("(min-width: 768px)")
addSplitMaxWidth(media_query) // Call listener function at run time
media_query.addListener(addSplitMaxWidth) // Attach listener function on state changes
</script>
<!-- End caculator -->
</div>
CSS
body {
box-sizing: border-box;
}
.full-width-tier {
position: relative;
width: 100%;
}
.container {
max-width: 1170px;
margin: 0 auto;
}
.main-text {
padding: 20px;
}
.flex-tier {
position: relative;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-tier [class*="flex-col-"] {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.flex-tier .main-text {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
justify-content: center;
position: relative;
z-index: 2;
height: 100%;
}
@media (max-width: 768px) {
.flex-tier {
display: block !important;
}
.flex-tier [class*="flex-col-"] {
max-width: 100% !important;
width: 100% !important;
}
}
.flex-col-1 .main-text {
float: right;
}
.flex-col-2 .main-text {
float: left;
}
#tier-two .flex-col-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
#tier-two .flex-col-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
将Javascript和Jquery放在HTML内的道歉，但是这些脚本相对于HTML的加载顺序非常重要。
现在，尽管我的计算值似乎是正确的，但是以较大的屏幕尺寸查看页面时，两层的容器似乎没有对齐。这是屏幕截图：
这是我的问题。无论我进行了什么调整，都无法解决此问题。我可以手动设置宽度，也可以更改每边使用的容器最大宽度值的百分比以完美对齐，但是当我这样做时，解决方案仅适用于当前使用的最大宽度（在这种情况下为1170px） 。如果最大宽度增加到1500像素，则手动设置的值不再对齐。 不管容器类最初设置的最大宽度值是什么，这都需要工作。
这是一个jsfiddle，我的代码已经放置到位。这也是preview of the page。
很抱歉，这很多，但希望我已经阐明了我的困境。预先感谢您提供的所有帮助！
答案 0 :(得分：0)
有一个很长的问题，如果我的答案不完全是您想要的，我深表歉意，但是CSS网格是一种制作2列的好方法，其中一列总是占据40％的空间，而另外60列％。这样的事情会起作用：
.container {
display: grid;
grid-template-columns: 40% 60%; /*you could also just do 40% auto */
grid-template-rows: 100%;
}
.smallColumn {
grid-column: 1 / 2;
}
.largeColumn {
grid-column: 2 / 3;
}
如果您对CSS网格的工作方式不太熟悉，我强烈建议您学习它，因为它是如此有用/功能强大。 Here's a good resource.
让我知道您是否需要进一步说明或有其他问题。祝好运！