Question

我有一个容器#main-element，其宽度可根据窗口大小等变化。在这个容器里面，我有一些元素和一个底部对齐的页脚容器#wrapper（始终是父项width: 100%）并包含两个div #left和#right 。

#left元素可自由扩展至min-width: 300px，#right元素具有集合width: 120px。我试图完成的行为是：

如果#wrapper的宽度足以容纳两个元素（>= 320px），则显示其子项，以便#left填充剩余的宽度;
如果#wrapper不能包含这两个元素，请允许#left获取其父级整体宽度并在下方显示#right。

我已成功实现了这一点......我无法弄清楚的最后一件事是如果强制#right低于#left而不是JS，如果它们不能同时适用。{I}我确信有一个简单的解决方案我没有看到

我最好寻找一个不需要flexbox且与旧浏览器兼容的解决方案（例如!function(t){t(document).ready(function(){t.fn.asize=function(){t(this).animate({width:t(this).css(t(this).width()+"px"==t(this).css("min-width")?"max-width":"min-width")},{duration:3e3,step:function(i){t("span",this).text(Math.round(i)+"px"),t("#left").text(Math.round(t("#left").width())+"px"),t("#right").text(Math.round(t("#right").width())+"px")},complete:function(){t(this).asize()}})},t("#main-element").asize()})}(jQuery.noConflict());可能不可能）。

到目前为止我的代码包含在下面。注意 JS部分 IRRELEVANT 解决问题，仅供演示使用。

＆＃13;

#main-element {
    /* this element HAS to be relative */
    position: relative;
    
    /* below rules are irrelevant */
    height: 100px;
    min-width: 360px;
    max-width: 570px;
    border: 1px solid #f00;
}

#wrapper {
    /* width is always 100% and always aligned to bottom */
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

#left {
    /* force div to have at least 300px and exclude #right from its width */
    overflow: hidden;
    min-width: 300px;

    /* below rules are irrelevant */
    background-color: #aa0;
    height: 50px;
}

#right {
    /* show on the right; width always set, height equal to #left's height */
    float: right;
    height: 50px;
    width: 120px;

    /* below rules are irrelevant */
    background-color: #990;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- main widget container -->
<div id="main-element">
    <!--some number of elements inside the widget -->
    <span></span> 
  
    <!-- footer of the widget-->
    <div id="wrapper">
        <div id="right"></div>
        <div id="left"></div>
    </div>
</div>

＆＃13;

dataFrame.write.format("com.databricks.spark.csv").save("myFile.csv")

＆＃13;

Answer 1

我认为这就是你要找的东西。

我使用 display:table 代表wrapper类， display:table-column 代表内部元素left和{ {1}}上课。

此外，您需要媒体查询来添加屏幕宽度断点。在这里，我使用了right类的宽度，例如 main-element 。你可以根据需要改变570px来说360px。

因此，当屏幕在处达到时，左侧的div会获得@media screen and (max-width: 570px)，这会强制推动min-width:100%;类div低于它。

当right div低于我right时，您可以删除它并根据您的要求执行。

这就是我理解你想要的。如果没有那么评论，会尝试其他。

JSFiddle : DEMO

＆＃13;

float:left

＆＃13;

#main-element {
  /* this element HAS to be relative */
  position: relative;
  overflow: auto; /* ******** ADDED ******** */
  /* 100pxrules are irrelevant */
  height: 100px;
  min-width: 360px;
  max-width: 570px;
  border: 1px solid #f00;
}
p {  /* ******** ADDED ******** */
  margin-bottom: 20px;
}
#wrapper {
  /* width is always 100% and always aligned to bottom */
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  display: table;  /* ******** ADDED ******** */
}
#left {
  /* force div to have at least 300px and exclude #right from its width */
  overflow: hidden;
  min-width: 300px;
  display: table-column;   /* ******** ADDED ******** */
  /* below rules are irrelevant */
  background-color: #aa0;
  height: 50px;
}
#right {
  /* show on the right; width always set, height equal to #left's height */
  float: right;
  height: 50px;
  width: 120px;
  display: table-column;   /* ******** ADDED ******** */
  /* below rules are irrelevant */
  background-color: #990;
}
@media screen and (max-width: 570px) {   /* ******** ADDED ******** */
  #left {
    float: left;
    min-width: 100%;
  }
  #right {
    float: left;
  }
}

＆＃13;

并排div如果有足够的空间，否则堆叠宽度为100％

1 个答案: