Question

我有一个有两个容器的弹出窗口：

文本容器
按钮容器

弹出窗口的宽度为370像素，按钮显示在文本下方。

弹出窗口的宽度只能在中更改按钮中的长文本会导致弹出窗口宽度增大（按钮应始终显示在一行中）。

如果文本容器中有长文本，则弹出宽度应保持为370px。

例如：

由于按钮中的长文本，弹出窗口宽度为383px：

弹出窗口宽度为370px（按钮文字可以370px显示）：

这是我的jsbin：

http://jsbin.com/fuzozehipo/1/edit?html,css,output

HTML：

.popup { display: inline-block; position: relative; border: 1px solid; min-width: 370px; } .text-container { width: 100%; }

CSS：

<?php error_reporting(0); require_once 'config.php'; if (isset($_POST['email'])) { $email = $_POST['email']; $code = rand(100,999); $query = "SELECT * FROM `userdetails` WHERE email = '$email'"; $result = mysqli_query($link,$query) or die(mysqli_error()); $count = mysqli_num_rows($result); if ($count == 1) { mysqli_query("update userdetails set activation_code='$code' where email='$email'"); //send email $to = "$email"; $subject = "Account Details Recovery"; $body = "Hi $r->email, nn you or someone else have requested your account details. nn Here is your account information please keep this as you may need this at a later stage. nnYour username is $r->email nn your password is $password nn Your password has been reset please login and change your password to something more rememberable.nn Regards Site Admin"; $lheaders= "From: <contact@domain.com>rn"; //is this where i should place my own email address? $lheaders.= "Reply-To: noprely@domain.com"; mail($to, $subject, $body, $additionalheaders); } else { } echo " Something Here for a response"; } ?> <form action="" method="post"> Enter you email ID: <input type="text" name="email"> <input type="submit" name="submit" value="Send"> </form>

任何帮助表示赞赏！

Answer 1

您可以使用interesting Flex rendering trick通过将子宽度设置为0来使文本不展开父级。然后设置min-width: 100%以确保它占用父容器的整个宽度，现在只能通过按钮的宽度来控制。

.popup {
  border: 1px solid;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  min-width: 370px;
  display: inline-flex;
  flex-direction: column;
}

.text {
  width: 0;
  min-width: 100%;
}

.buttons {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
}

button + button {
  margin-left: 10px;
}

<div class="popup">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at porta sapien. Quisque sapien justo, fringilla consectetur molestie eu, hendrerit vehicula purus. Pellentesque ac ante urna.
  </div>
  <div class="buttons">
    <button>Really long text that will make the buttons push out the parrent div</button>
    <button>text</button>
  </div>
</div>

Answer 2

你能做点什么吗

.wrapper {
  display: inline-block;
  position: relative;
  border: 1px solid;
  min-width: 370px;
}

.buttons-container {
  display: flex;
  flex-direction: row;
}

.buttons-container > button {
  flex: 1;
  white-space: nowrap;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buttons-container > button:first-child {
  margin-left: 0;
}

.text-container {
  width: 100%;
}

Answer 3

对于文本，预计.popup会随着文本的增长而增长，因为它是inline-block元素，因此width: 100%;的行为与您想要的不同。由于您370px的值是硬编码的，因此我认为在.text-container规则集中将max-width重新用作padding: 30px;规则的一部分时，没有任何问题。虽然您的屏幕截图似乎有box-sizing: border-box规则，但如果您使用的是.popup，则可以.text-container的{{1}}来补偿max-width的填充1}} 310px，每边都是width - padding。

对于按钮，使用white-space: nowrap;上的.buttons-container将您的按钮保持在同一行，但.popup的{{1}}的上述行为应该照顾它本身。

inline-block

.popup {
  display: inline-block;
  position: relative;
  border: 1px solid;
  min-width: 370px;
}

.text-container {
  max-width: 370px; /* Compensate for the padding if using box-sizing: border-box */
}

.buttons-container {
  white-space: nowrap;
}

根据特定容器更改弹出窗口宽度

3 个答案: