Question

我正在创建一个致敬页面，并且边框中有一个图像，但是我还想在图像下方的边框中添加文本。

我尝试将文本和图像放在相同的CSS类中，并赋予它们相同的ID。

#image {
  max-width: 400px;
  border: 5px solid gray;
  padding: 50px;
}

.border {
  border: 5px solid gray;
}

<img id="image" class="border" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" <figcaption id="img-caption" class="border"><em><a href=https://en.wikipedia.org/wiki/Norman_Borlaug target="_blank"> Dr. Norman Borlaug</a>, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</em></figcaption>
</div>

我希望图像和图片在同一边界内，但是它们不在同一边界内。

Answer 1

尝试一下，将所有内容包裹在带有边框的div中：

<div class="border">
<img id="image"  src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" 
         <figcaption id="img-caption" class="border"><em><a href=https://en.wikipedia.org/wiki/Norman_Borlaug target="_blank"> Dr. Norman Borlaug</a>, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</em></figcaption>
</div>

Answer 2

Figcaption是它自己的块，需要在它之前关闭img标签。然后将整个内容包装在div中。

.border {
  border:1px solid red;
}

<div class="border">
<img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" />
  <figcaption id="img-caption" class="border">
    <em><a href=https://en.wikipedia.org/wiki/Norman_Borlaug target="_blank"> Dr. Norman Borlaug</a>, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</em>
   </figcaption>
 </div>

Answer 3

在图像和文本周围环绕一个div，然后将边框应用于该div。

.border {
    max-width:400px;
    border: 5px solid gray;
    padding: 50px;
}
.border img {
    max-width:100%;
}

<div class="border">
  <img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"> 
  <figcaption id="img-caption">
    <em><a href=https://en.wikipedia.org/wiki/Norman_Borlaug target="_blank"> Dr. Norman Borlaug</a>, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</em>
    </figcaption>
</div>

Answer 4

您需要在各个元素上上课。您需要为外部div提供类边框，还需要从图像本身中删除边框css。

由于要为单个元素提供边框类和/或边框样式。它出现在他们周围。

session_start();

require_once 'loginmysql.php';

$error = $user = $pass = "";
if(isset($_POST['submit'])){
if (isset($_POST['un'])) {
    $user = sanitizeString($_POST['un']);
    $pass = sanitizeString($_POST['pw']);

if($user == "" || $pass == "")
    $error = "Not all fields were entered";
    }
else{
    $sql = "SELECT username, password FROM `Info` WHERE username = '$
    user' AND pass = '$pass'";
    $result = mysqli->query($sql);
if($result->num_rows == 0){
    $error = "Invalid login attempt";
    }
else {
    $_SESSION['un'] = $user;
    $_SESSION['pw'] = $pass;
    die("You are now logged in.");
    }
    }
}
}

#image {
  max-width: 400px;
  padding: 50px;
}

.border {
  border: 5px solid gray;
}

如何将文字放在预先存在的边界内

4 个答案: