Question

这是我的设计

HTML：

textarea

CSS：

<body>
  <div id="divheader"></div>
  <div id="wrapper">
    <div id="leftsection"></div>
    <div id="middlesection"></div>
  </div>
</body>

IE 11.0工作正常但页面在Chrome和Firefox中显示垂直滚动。

请告诉我这里我做错了什么。

Answer 1

这与你的想法类似吗？请告诉我们您到底需要什么:)

#wrapper {
        width: 100%;
        height:40px;
    }

    #divheader {
        width: 75%;
        height: 10%;        
        border:1px solid black;
        text-align:  center;
        background-color:orange;
    }
    #leftsection {
        font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial,sans-serif;
        width:10%;
        height:120px;
        display:inline-block;  
        border:1px solid black;
        background-color:skyblue;
    }
    #middlesection {
        width: 65%;
        height:120px;
        display:inline-block;
        border:1px solid black;        
        margin-left:0%;
        background-color:red;
    }

Answer 2

我可能在这里错了，但是我在这里看到的是你正在尝试使用flex-align，我可能错了，但我认为这不存在。

align-items使用flex并删除了浮点数的需要（使用flex的唯一目的，因此您不必破坏页面流。）

如果您确实使用flex，则需要＆＃34;激活＆＃34;通过在封装器中使用，display：flex，然后该容器的任何子节点都基于flex。

#leftsection {
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

   /* What type of direction would you want the wrapper to be -> <- down or up */
   /* here we say make the direction of the primary axis down (from top to bottom) */       
   -webkit-flex-flow: column nowrap;
   -moz-flex-flow: column nowrap;
   -ms-flex-flow: column nowrap;
   flex-flow: column nowrap;

   /* here we define the positioning of the elements inside the container to the center (in the primary axis) (This will center the items from top and bottom */
   -webkit-justify-content: center;
   -moz-justify-content: center;
   -ms-justify-content: center;
   justify-content: center;

   /* after that you may use align-items. however align-tems is based on cross axis positioning, so if you want the children to be on the left side you should use this: */
   -webkit-align-items: flext-start;
   -moz-align-items: flex-start;
   -ms-align-items: flex-start;
   align-items: flex-start;

   font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial,sans-serif;
   width: 10%;
}

这样，添加到#leftsection的任何元素都将位于列的中心和列的左侧（定位）。

希望这可以帮助你交配，或者我只是写完全无意义的任何可以帮助你处理你的问题^^。

在IE中工作正常但在Firefox和Chrome中没有

2 个答案: