Question

我会尽力解释这个问题。我有两个divs并排。正确的一个有三个段落。左边的图像，垂直文本和第二个图像。第一个图像应位于左上角，垂直文本应水平和垂直居中，第二个图像应位于右下角。

＆＃13;

body {
  width: 8.5in;
}

.left-div {
  float: left;
  background: blue;
}

.right-div {
  overflow: hidden;
  background: red;
}

.left-img {
  float: left;
}

.big-text {
  background: orange;
  font-size: 2em;
  padding: 0 30px;
  float: left;
  vertical-align: middle;
}

.right-img {
  float: left;
  bottom: 0;
  right: 0;
}

.bottom-div {
  background: gray;
}

＆＃13;

<div class="left-div">
  <div class="left-img">
    <img src="smiley.gif" width="150">
  </div>
  <div class="big-text">
    <p>B<br>I<br>G</p>
  </div>
  <div class="right-img">
    <img src="smiley.gif" height="200">
  </div>
  <div class="right-div">
    <p>First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First
      paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.
      <p>Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph.
        Second paragraph.
        <p>Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third
          paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph.
  </div>
</div>
<div class="bottom-div">
  <p>Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph
    of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
</div>

＆＃13;

Answer 1

你想要这样的东西吗？

//Editable Text Box with Preset Keywords

@IBOutlet weak var UselessLabel: UILabel!

@IBAction func UselessTapped(_ sender: UIButton) {
    print("Useless Button Tapped")
    openUselessAlert()

}

func openUselessAlert() {

    //Create Alert Controller
    let alert9 = UIAlertController (title: "Uselss:", message: nil, preferredStyle: UIAlertControllerStyle.alert)

    //preset keyword as button in alert controller
    let bt1 = UIAlertAction(title: "Good", style: UIAlertActionStyle.default){
        (action) in self.UselessLabel.text = "Good"}

    alert9.addAction(bt1)

    //preset keyword as button in alert controller
    let bt2 = UIAlertAction(title: "Likely", style: UIAlertActionStyle.default){
        (action) in self.UselessLabel.text = "Likely"}

    alert9.addAction(bt2)

    //preset keyword as button in alert controller
    let bt3 = UIAlertAction(title: "Almost", style: UIAlertActionStyle.default){
        (action) in self.UselessLabel.text = "Almost"}

    alert9.addAction(bt3)

    //Create Cancel Action
    let cancel9 = UIAlertAction(title: "CANCEL", style: UIAlertActionStyle.cancel, handler: nil)

    alert9.addAction(cancel9)


    //Create OK Action
    let ok9 = UIAlertAction(title: "OK", style: UIAlertActionStyle.default) { (action: UIAlertAction) in print("OK")
        let textfield = alert9.textFields?[0]
        print(textfield?.text!)
        self.UselessLabel.text = textfield?.text!
    }

    alert9.addAction(ok9)

    //Add Text Field
    alert9.addTextField { (textfield: UITextField) in
        textfield.text = "Useless"
    }

    //Present Alert Controller
    self.present(alert9, animated:true, completion: nil)
}

.container{
  margin: auto;
  outline: 2px solid green;
  width: 70%;
  height: 300px;
 }
span{
  float:right;
  font-size: 28px;
}
.div1, .div2, .div3{
  text-align:center;
  vertical-align: middle;
  line-height: 100px;
  width: 33.33%;
  height: 100px;
  color: white;
}
.div1{
  background-color: blue;
}
.div2{
  margin-left: 33.2%;
  background-color: grey;
}
.div3{
  margin-left: 66.5%;;
  background-color: red;
}

Answer 2

您可以将左右div包装到容器中并使用嵌套的flexbox布局。

<强> CodePen

body {
  width: 8.5in;
}

p {
  margin: 0;
  padding-bottom: 20px;
}

img {
  vertical-align: top;
}

.container {
  display: flex;
}

.left-div {
  background: blue;
  display: flex;
  align-items: center;
}

.right-div {
  background: red;
}

.left-img {
  align-self: flex-start;
}

.big-text {
  background: orange;
  font-size: 2em;
  padding: 0 30px;
}

.right-img {
  align-self: flex-end;
}

.bottom-div {
  background: gray;
}

<div class="container">
  <div class="left-div">
    <div class="left-img">
      <img src="//dummyimage.com/150x150" width="150">
    </div>
    <div class="big-text">
      <P>B<br>I<br>G</p>
    </div>
    <div class="right-img">
      <img src="//dummyimage.com/100x200" height="200">
    </div>
  </div>
  <div class="right-div">
    <p>First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First
      paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.</p>
    <p>Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph. Second paragraph.
      Second paragraph.</p>
    <p>Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph. Third paragraph.
      Third paragraph. Third paragraph. Third paragraph. Third paragraph. </p>
  </div>
</div>
<div class="bottom-div">
  <p>Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph
    of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
</div>

如何让三个div对角显示？

2 个答案: