Question

这有点难以用语言描述，所以我会尽我所能，但整个事情都在JSFiddle，并且下面有一个片段。

我有一个模态对话框，提示用户确认是否要执行某项操作。

左侧有一个图标（可能是字体或图像 - 待定）。图标右侧是一个文本提示，可能会很长，所以需要换行。当它包裹它应该留在它的＆＃34;列＆＃34;而不是在图标下面。

“取消/是”样式中还有两个操作堆叠在一起但需要保持居中。他们的盒子可能需要与图标重叠以占用任何可用的垂直空间。

它看起来像这样：

+-----------------------+
|XXX  Are you sure?     |
|XXX                    |
|XXX       Yes          |
|         Cancel        |
+-----------------------+

或如果提示很长，则为：

+-----------------------+
|XXX  Are you sure?     |
|XXX  blah blah blah    |
|XXX  blah blah blah    |
|     blah blah blah    |
|          Yes          |
|         Cancel        |
+-----------------------+

我试图浮动图标并使用内联块，但它会破坏包装，居中或重叠按钮。

＆＃13;

.parent {
  width: 300px;
  background-color: yellow;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.ion-trash-b {
  font-size: 100px;
}

.left {
  float: left;
}

.hack {
  position: absolute;
  top: 96px;
  width: 300px;
}

.context {
  overflow: hidden;
}

button {
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

a {
  color: #07d;
  cursor: pointer;
  width: 100%;
  text-align: center;
  display: block;
}

＆＃13;

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<div class="parent clearfix">
  <div class="clearfix">
    <div class="ion-trash-b left"></div>
    <h3>Delete</h3>
    <p>Are you sure?</p>
  </div>
  <div class="hack clearfix">
    <button>Yes</button>
    <a>No</a>
  </div>
</div>

This is what I want but preferably without any fixed sizes or positions.

<hr />

<div class="parent clearfix">
  <div class="ion-trash-b left"></div>
  <h3>Delete</h3>
  <p>Are you sure?</p>
  <button>Yes</button>
  <a>No</a>
</div>

Buttons and links not centered.

<hr />

<div class="parent clearfix">
  <div class="ion-trash-b left"></div>
  <h3>Delete</h3>
  <p>Are you sure? (This actually may get quite long and still needs to wrap correctly. As you can see this doesn't work quite right. Oops still not quite there yet... blah blah blah blah blah blah blah blah blah blah blah blah)</p>
  <button>Yes</button>
  <a>No</a>
</div>

Doesn't wrap correctly.

<hr />

<div class="parent clearfix">
  <div class="ion-trash-b left"></div>
  <h3>Delete</h3>
  <p class="context">Are you sure? (This actually may get quite long and still needs to wrap correctly. As you can see this doesn't work quite right. Oops still not quite there yet... blah blah blah blah blah blah blah blah blah blah blah blah)</p>
  <button>Yes</button>
  <a>No</a>
</div>

Almost there but...

<hr />

<div class="parent clearfix">
  <div class="ion-trash-b left"></div>
  <h3>Delete</h3>
  <p class="context">Are you sure?</p>
  <button>Yes</button>
  <a>No</a>
</div>

... Haven't solved the first problem.

<hr />

＆＃13;

Answer 1

您对flexbox感到满意吗？

在CSS方面，我基本上做的是将.parent设置为display: flex。我还在图标中添加了一些padding-right。

在HTML上，我将.parent内的所有内容都包裹在div.right-section中的图标中。这使得右侧具有类似于柱状的感觉，这应该解决包裹问题。

.parent内的任何元素都没有使用固定宽度。

.parent {
  display: flex; // added
  width: 300px;
}

.ion-trash-b {
  font-size: 100px;
  padding-right: 15px; // added but not necessary
}

button {
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

a {
  color: #07d;
  cursor: pointer;
  width: 100%;
  text-align: center;
  display: block;
}

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

<div class="parent clearfix">
  <div class="ion-trash-b left"></div>
  
  <!-- added div to group content -->
  <div class="right-section">
    <h3>Delete</h3>
    <p class="context">Are you sure? (This actually may get quite long and still needs to wrap correctly. As you can see this doesn't work quite right. Oops still not quite there yet... blah blah blah blah blah blah blah blah blah blah blah blah)</p>
    <button>Yes</button>
    <a>No</a>
  </div>
</div>

如何向左浮动元素，将文本包装到侧面，以及下方的中心元素？

1 个答案: