Question

我正在尝试使用flexbox实现以下布局。

┌─┬─────┐
│A│     │
├─┤  C  │ 
│B│     │
└─┴─────┘

是否可以在不将A和B包装成包装的情况下这样做？

Answer 1

是的，这是可能的。请注意，在此示例中，主容器具有固定的宽度和高度。

@model SupervisedSolutions.Models.VehicleAction

@Html.LabelFor(model => model.Description)
@Html.TextAreaFor(model => model.Description)
@Html.ValidationMessageFor(model => model.Description)

@Html.LabelFor(model => model.Priority)
@Html.TextAreaFor(model => model.Priority)
@Html.ValidationMessageFor(model => model.Description)

@Html.LabelFor(m => m.DueDate>
@Html.EditorFor(model => model.DueDate)
@Html.ValidationMessageFor(m => m.DueDate)

vehicleId:50
serviceSheetId:1
ID:0
questions[1].Question.ID:3
questions[1].Question.Title:Testing
questions[1].Question.Description:AASDASD
questions[1].Question.IsGroup:True
questions[1].Question.OrderIndex:1
questions[1].Question.ParentQuestion.ID:
questions[1].Question.ParentQuestion.setDeleted:
questions[1].Question.ParentQuestion.Title:
questions[1].Question.ParentQuestion.Created:
questions[0].Question.ID:1
questions[0].Question.Title:Test Question
questions[0].Question.Description:Habba
questions[0].Question.IsGroup:False
questions[0].Question.OrderIndex:0
questions[0].Question.ParentQuestion.ID:3
questions[0].Question.ParentQuestion.setDeleted:False
questions[0].Question.ParentQuestion.Title:Testing
questions[0].Question.ParentQuestion.Created:28/11/2016 7:35:12 PM
questions[0].isFault:NoFault
questions[0].FaultDescription:Teste
questions[3].Question.ID:5
questions[3].Question.Title:Group 2
questions[3].Question.Description:Groupin 2
questions[3].Question.IsGroup:True
questions[3].Question.OrderIndex:0
questions[3].Question.ParentQuestion.ID:
questions[3].Question.ParentQuestion.setDeleted:
questions[3].Question.ParentQuestion.Title:
questions[3].Question.ParentQuestion.Created:
questions[2].Question.ID:4
questions[2].Question.Title:Test Question 23
questions[2].Question.Description:TEEEE
questions[2].Question.IsGroup:False
questions[2].Question.OrderIndex:0
questions[2].Question.ParentQuestion.ID:5
questions[2].Question.ParentQuestion.setDeleted:False
questions[2].Question.ParentQuestion.Title:Group 2
questions[2].Question.ParentQuestion.Created:1/12/2016 4:19:49 PM
questions[2].isFault:NoFault
questions[2].FaultDescription:Teste
actions[0].Description:Erro2
actions[0].Priority:1
actions[0].DueDate:2010-01-01

Answer 2

不幸的是，没有固定的高度，所以我最终以旧方式做事 - 通过表格，像这样

HTML：

<div id="container">
   <div id="A">A<br>AAA<br>BBB</div>
   <div id="B">B</div>
   <div id="C">C</div> 
</div>

CSS：

#container {
   width: 100%;
   outline: 1px solid black;
   display: table;
}

#A,#B,#C {
   outline: 1px solid crimson;
}

#A,#B {
  width: 100%;
}

#C {
   display: table-cell;
   vertical-align: middle;
   width: 50%;
}

flexbox布局，左侧有两个项目，右侧有一个项目

2 个答案: