Question

我正在尝试创建两个div，一个在左边，49％width，然后是2％margin，然后另一个div在49％width也是。但我对垂直空间以及margin都有问题。

样本

.Footer-firstElement {
        font-size: 0;
        line-height: 0;
        height: 200px;
        background-color: tomato;
 }
        
.Footer-firstElementLeft {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        width: 49%;
        height: 100%;
        margin-top:0;
        margin-right: 2%;
        background-color: pink;
}
.Footer-firstElementRight {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        width: 49%;
        height: 100%;
        padding: 0;
        background-color: gold;
}

<div class="Footer-firstElement">
  <div class="Footer-firstElementLeft">
    <a href="#">Foo bar </a>
  </div>
  <div class="Footer-firstElementRight">
    Foo bar <br />
    Foo bar
  </div>
</div>

以下是该代码的小提琴：https://jsfiddle.net/L6k5ocyr/3/

我想我错过了什么，不知道吗？

Answer 1

.Footer-firstElement {
        font-size: 0;
        line-height: 0;
        height: 200px;
        background-color: tomato;
 }
        
.Footer-firstElementLeft {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        width: 49%;
        height: 100%;
        margin-top:0;
        margin-right: 2%;
        background-color: pink;
        float:left;  /* edited */
        
}
.Footer-firstElementRight {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        width: 49%;
        height: 100%;
        padding: 0;
        background-color: gold;
}

<div class="Footer-firstElement">
  <div class="Footer-firstElementLeft">
    <a href="#">Foo bar </a>
  </div>
  <div class="Footer-firstElementRight">
    Foo bar <br />
    Foo bar
  </div>
</div>

试试这个：

.Footer-firstElementLeft {
     float: left;
}

Answer 2

.Footer-firstElementLeft {
        vertical-align: top;
}

试试这个。

.Footer-firstElement {
        font-size: 0;
        line-height: 0;
        height: 200px;
        background-color: tomato;
 }
        
.Footer-firstElementLeft {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        width: 49%;
        height: 100%;
        margin-top:0;
        margin-right: 2%;
        background-color: pink;
        vertical-align: top;  /* edited */
}
.Footer-firstElementRight {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        width: 49%;
        height: 100%;
        padding: 0;
        background-color: gold;
}

<div class="Footer-firstElement">
  <div class="Footer-firstElementLeft">
    <a href="#">Foo bar </a>
  </div>
  <div class="Footer-firstElementRight">
    Foo bar <br />
    Foo bar
  </div>
</div>

Answer 3

尝试使用float属性，请参阅代码段

＆＃13;

.Footer-firstElement {
        font-size: 0;
        line-height: 0;
        height: 200px;
        background-color: tomato;
 }
        
.Footer-firstElementLeft {
    font-size: 16px;
    line-height: 20px;
    width: 49%;
    float: left;
    height: 100%;
    margin-right: 2%;
    background-color: pink;
}
.Footer-firstElementRight {
    font-size: 16px;
    line-height: 20px;
    width: 49%;
    float: right;
    height: 100%;
    padding: 0;
    background-color: gold;
}

＆＃13;

<div class="Footer-firstElement">
  <div class="Footer-firstElementLeft">
    <a href="#">Foo bar </a>
  </div>
  <div class="Footer-firstElementRight">
    Foo bar <br />
    Foo bar
  </div>
</div>

＆＃13;

Answer 4

当我想做这样的事情时，我建议你阅读flexbox 我编辑了您的fiddle以显示Flexbox可以执行的操作。

＆＃13;

[HttpPost]
public ActionResult Connect(string phoneNumber, string called)
{
    var response = new VoiceResponse();

    int agentId = 1;
    var action = Url.Action("Status", "Call", new { Area = "PhoneSystem", 
      agentId }, Request.Url.Scheme);

    var dial = new Dial(callerId: _credentials.PhoneNumber, timeout: 10, action: new Uri(action));

    if (phoneNumber != null)
    {
        dial.Number(phoneNumber);
    }
    else
    {           
        dial.Client("support_agent");
    }
    response.Dial(dial);

    return TwiML(response);
}

＆＃13;

.Footer-firstElement {
        display: flex;
        justify-content: space-between;
        font-size: 0;
        line-height: 0;
        height: 200px;
        background-color: tomato;
 }
 
 .Footer-firstElement > * {
       flex: 0;
       min-width: 49%;
 }
        
.Footer-firstElementLeft {
        font-size: 16px;
        line-height: 20px;
        height: 100%;
        background-color: pink;
}
.Footer-firstElementRight {
        font-size: 16px;
        line-height: 20px;
        height: 100%;
        padding: 0;
        background-color: gold;
}

＆＃13;

Answer 5

变化不大，只需向父母添加flex，向孩子添加flex:1;。

＆＃13;

.Footer-firstElement {
        height: 200px;
        width:100%;
        position:relative;
        background-color: tomato;
        display: flex;
 }
   
.Footer-firstElementLeft {
        flex:1;
        font-size: 16px;
        width: 50%;
        height: 100%;
        background-color: pink;
        margin-right: 8;
}
.Footer-firstElementRight {
        flex:1;
        font-size: 16px;
        width: 50%;
        height: 100%;
        background-color: gold;
        margin-left: 8px;
}

＆＃13;

<div class="Footer-firstElement">
  <div class="Footer-firstElementLeft">
    <a href="#">Foo bar </a>
  </div>
  <div class="Footer-firstElementRight">
    Foo bar <br />
    Foo bar
  </div>
</div>

＆＃13;

Answer 6

试试这个案例

.Footer-firstElement {
    font-size: 0;
    line-height: 0;
    height: 200px;
    background-color: tomato;
 }

.Footer-firstElementLeft {
    float: left;
    font-size: 16px;
    line-height: 20px;
    width: 49%;
    height: 100%;
    margin-top:0;
    margin-right: 2%;
    background-color: pink;
}
.Footer-firstElementRight {
    float: right;
    font-size: 16px;
    line-height: 20px;
    width: 49%;
    height: 100%;
    padding: 0;
    background-color: gold;
}

Div填充包装和边距的垂直空间

6 个答案: