Question

我有以下fiddle由此html标记和CSS组成：

  .embers-info{
    margin-top: 30px;
    border: 1px solid black;
    width: 600px;
    padding: 20px 0px 30px 0px;
  }


  .embers-total{
    width: 80px;
  }

  .embers-email{
    margin-left: 20px;
  }



  .embers-phone{
    margin: 10px 0px 0px 20px;
  }

  .embers-notes{
    margin: 20px 0px 0px 20px;
  }

  .embers-pickup{
    margin-left: 20px;
  }

  .embers-actions{
    margin-left: 20px;
    margin-top: 20px;
  }

  .af-commerce{
    float: right;
  }

  .embers-checkout-header{
    padding: 3px 10px 12px 5px;
  }

  .embers-user-info{
    width: 300px;
    border: 4px solid blue;
    padding-bottom: 50px;
  }

  .embers-delivery-info{
    width: 300px;
    border: 4px solid red;
    padding-bottom: 50px;
  }

   <div class='embers-info'>
     <div class='embers-user-info'>
  <div class='embers-email'>
    email:<br />
     <input type="text" size="30" name="email" id="email" />
  </div>
  <div class='embers-phone'>
    phone number:<br />
    <input type="text" size="30" name="phone_number" id="phone_number" />
  </div>
  <div class='embers-notes'>
    notes:<br />
    <textarea id='notes' cols='30' rows='5'></textarea>
  </div>
    <div class='embers-pickup'>

  <br />pickup times:<br />
  November 21 10am:<input type="radio" size="30" class="pickup" name="pickup" value="time1" /> <br />
  November 21 noon:<input type="radio" size="30" class="pickup" name="pickup" value="time2" /><br />
  November 21 2pm:<input type="radio" size="30" class="pickup" name="pickup" value="time3" /><br />
  November 21 4pm:<input type="radio" size="30" class="pickup" name="pickup" value="time4" /><br />
  November 22 8am:<input type="radio" size="30" class="pickup" name="pickup" value="time4" /><br />
</div>

  <div class='embers-actions'>
     <button id='save_order'>save order</button>
    <button id="customButton">Purchase</button>
   </div>
</div>

<div class='embers-delivery-info'>
  here i am
</div>

</div>

并希望并排获得蓝色和红色的div。我该怎么做？

我试图使用：

display:inline-block;

但这没关系。

Answer 1

有人提到了flexbox，虽然根据您的最低浏览器要求，一个完全有效的解决方案可能不是您需要的，因为Flexbox仍然不如人们所希望的那样得到支持。使用传统方法并排排列元素时，您有几个选项display: inline-block和float。

display: inline-block：http://jsfiddle.net/bzkt2hcx/2/

  .embers-info {
    display: inline-block;
  }

  .embers-info > div {
      display: inline-block;
      vertical-align: top;
  }

注意： inline-block个元素可能会在某些浏览器上以间距呈现，最明显的是chrome。要修复此设置，我们可以在父容器上设置font-size: 0，然后重置子项上的font-size。

float: left/right：http://jsfiddle.net/bzkt2hcx/3/

  .embers-info {
    overflow: auto;
  }

  .embers-info > div {
      float: left;
  }

注意：浮动元素从流中取出并且不会影响其父级高度，从而导致大小调整和布局问题。为了缓解这种情况，我们需要在父级上应用clearfix，其中最简单的是在父容器上设置overflow: auto。

Answer 2

您可以通过将int main(int argc, char *argv[]){ int i = 0; char* text = malloc(sizeof(char)); char symbol; char* aux; while(1){ symbol = getchar(); //Use getchar to read only one char, scanf would be more problematic if(symbol == 13){ //13 should be the ascii value for enter break; } text[i] = symbol; if ((aux = (char*)realloc(text, sizeof(char)*(i+1))) == NULL){ // Handle error return -1; } text = aux; i++; } text[i] = '\0'; //Remember to set last char in your string to '\0' or printf won't work properly printf("%s", text); free(text); getch(); return 0; }添加到包含div来使用flexbox。这将默认在display: flex行中，这将使它们彼此相邻：

http://jsfiddle.net/bzkt2hcx/1/

有关在Flexbox容器中布置子项的更多阅读材料：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

如何在这个容器中并排获得这两个div

2 个答案: