Question

我显示了两个iframe。在iframe上方，我想插入每一个的描述。我可以使说明A在下面的iframe上对齐，但是我不能在第二个iframe的左侧直接将说明B对齐。

.wrap {
	display: flex;
}

.wrapIn {
	flex: 1;
	padding-bottom: 20px;
}

.guidedQueryHeading {
	font-family: "Arial Narrow", Arial, sans-serif;
	color: #FFF;
	font-size: 24px;
	font-weight: 600;
	padding-top: 30px;
	text-shadow: 2px 2px 8px rgba(43, 43, 43, 1.00);
}

<div class="wrap">
        <div class="guidedQueryHeading col-xl-10 offset-xl-1 wrapIn">Description A:</div>
		<div class="guidedQueryHeading col-xl-10 offset-xl-1 wrapIn">Description B:</div>
      </div>
    
      <div class="row">
        <div class="offset-xl-1 col-xl-10 wrapIn">
          <iframe src="https://www.w3schools.com" width="25%" align="left" style="margin-left:auto; margin-right:auto; display:block;" scrolling="auto" height="600" allowfullscreen>
          </iframe>
		  <iframe src="https://www.w3schools.com" width="60%" align="right" height="600" allowfullscreen></iframe>
        </div>
      </div>
    </div>

Answer 1

使用display: flex可以创建简单的列/行设置并在所需位置对齐元素。使用下面的元素的快速示例。

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  width:50%;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.guidedQueryHeading {
  font-family: "Arial Narrow", Arial, sans-serif;
  color: #FFF;
  font-size: 24px;
  font-weight: 600;
  padding-top: 30px;
  text-shadow: 2px 2px 8px rgba(43, 43, 43, 1.00);
}

<div class="offset-xl-1 col-xl-10 row">
    <div class="column">
        <div class="guidedQueryHeading col-xl-10 offset-xl-1">Description A:</div>
        <iframe src="https://www.w3schools.com" scrolling="auto" height="600" allowfullscreen>
        </iframe>
    </div>
    <div class="column">
        <div class="guidedQueryHeading col-xl-10 offset-xl-1 wrapIn">Description B:</div>
        <iframe src="https://www.w3schools.com" align="right" height="600" allowfullscreen></iframe>
    </div>
</div>

Answer 2

您可以尝试将每个说明和对应的iframe包裹在单独的div中，然后将其与display：flex一起放入行div中，例如：

    html,body{
      width:100%;
      height:100%;
    }

    iframe{
      width: auto;
    }

    .iframe-element{
      margin: 10px;

    }

    .row {
      width: 100%;
        display: flex;

      flex-direction:row;
      align-items:center;
    }

    .guidedQueryHeading {
        font-family: "Arial Narrow", Arial, sans-serif;
        color: #FFF;
        font-size: 24px;
        font-weight: 600;

        text-shadow: 2px 2px 8px rgba(43, 43, 43, 1.00);
    }

<body>
  <div class="row">
    <div class="iframe-element">
      <div class="guidedQueryHeading col-xl-10 offset-xl-1 wrapIn">Description A:</div>
      <iframe src="https://www.w3schools.com" width="25%" align="left" style="margin-left:auto; margin-right:auto; display:block;" scrolling="auto" height="600" allowfullscreen>
        </iframe>
    </div>
    <div class="iframe-element">
      <div class="guidedQueryHeading col-xl-10 offset-xl-1 wrapIn">Description B:</div>
      <iframe src="https://www.w3schools.com" width="60%" align="right" height="600" allowfullscreen>     </iframe>
    </div>
  </div>
</body>

Answer 3

Justom将新的自定义CSS添加为： CSS：

.wrap {
  display: flex;
    }

    .wrapIn {
  flex: 1;
  padding-bottom: 20px;

    }
.custom{
    padding-right: 375px !important;
}

    .guidedQueryHeading {
  font-family: "Arial Narrow", Arial, sans-serif;
  color: #FFF;
  font-size: 24px;
  font-weight: 600;
  padding-top: 30px;
  text-shadow: 2px 2px 8px rgba(43, 43, 43, 1.00);
    }

HTML：

<div class="wrap">
    <div class="guidedQueryHeading col-xl-10 offset-xl-1 wrapIn">Description A:</div>
    <div class="guidedQueryHeading col-xl-1 wrapIn custom">Description B:</div>
  </div>

  <div class="row">
    <div class="offset-xl-1 col-xl-10 wrapIn">
      <iframe src="https://www.w3schools.com" width="25%" align="left" style="margin-left:auto; margin-right:auto; display:block;" scrolling="auto" height="600" allowfullscreen>
      </iframe>
      <iframe src="https://www.w3schools.com" width="60%" align="right" height="600" allowfullscreen></iframe>
    </div>
  </div>
</div>

Answer 4

解决方案之一是使用“伸缩”来帮助您轻松调整项目。

.wrap {
	display: flex;
}

.wrapIn {
	flex: 1;
	padding-bottom: 20px;
}

.guidedQueryHeading {
	font-family: "Arial Narrow", Arial, sans-serif;
	color: #FFF;
	font-size: 24px;
	font-weight: 600;
	padding-top: 30px;
	text-shadow: 2px 2px 8px rgba(43, 43, 43, 1.00);
}

.item1 {
  flex-grow: 2;
}

.item2 {
  flex-grow: 3;
}

<div class="wrap">
        <div class="guidedQueryHeading col-xl-10 offset-xl-1 wrapIn item1">Description A:</div>
		<div class="guidedQueryHeading col-xl-10 offset-xl-1 wrapIn item2">Description B:</div>
      </div>
    
      <div class="row">
        <div class="offset-xl-1 col-xl-10 wrapIn">
          <iframe src="https://www.w3schools.com" width="25%" align="left" style="margin-left:auto; margin-right:auto; display:block;" scrolling="auto" height="600" allowfullscreen>
          </iframe>
		  <iframe src="https://www.w3schools.com" width="60%" align="right" height="600" allowfullscreen></iframe>
        </div>
      </div>
    </div>

在Div下方对齐左上方的文本

4 个答案: