时间戳

首页 > 解决方案 > 重新调整浏览器宽度时如何自动重新计算边距

html - 重新调整浏览器宽度时如何自动重新计算边距

问题描述

所以我想出了一个例子，其中我在 HTML 中有以下内容：

在此处输入图像描述

重点将放在我在上图中指出的两句话上。

如图所示，一个有句子“This is a short sentence”，底部的基本上是一个较长的句子。

现在我在 css 中设置短句的边距，使其与底部的长句对齐。

所以基于这个例子，我想要实现的基本上是让浏览器在我调整浏览器的宽度时重新计算边距。

现在，如果我稍微调整浏览器的宽度，我们会看到句子偏离了轨道，不再与底部的句子对齐。

在此处输入图像描述

如果原始对齐状态的左侧边距为 45.3% ，那么每当调整浏览器宽度时，我如何获得等效值？

将不胜感激这方面的一些帮助。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body {
    height: 100%;
    font-size: 1rem;
}

#container {
    display: flex;
    width: 100%;
}

#first {
    border: 1px solid black;
    border-radius: 5px;
    width: 35%;
    height: 90vh;
    margin-left: 10px;
}

/*Margin for sentence set here*/
#sentence1 {
    margin-left: 45.3%;
}

#second {
    border: 1px solid black;
    border-radius: 5px;
    height: 90vh;
    width: 50%;
    margin-left: 10px;
}
<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "avc_label_style.css">
  <title>Document</title>
</head>
<body>
  <div id = "container">
    <div id = "first">
      <div id = "sentence1">This is a short sentence</div>
      <div id = "sentence2">This is a very long sentence long sentence long sentence long sentence</div>
    </div>
    <div id = "second">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit quam et tellus tincidunt posuere. Vivamus malesuada sapien quis elit semper, tristique elementum lectus condimentum. Suspendisse quis accumsan mi. Sed vel eros laoreet, lobortis purus eget, ornare metus. Donec non magna dictum, pretium justo id</p>
    </div>
  </div>
</body>
</html>

标签： htmlcss

解决方案

您可以在其中添加另一个 div，包装#sentence1 和#sentence2。然后根据需要制作该 div 并右对齐所有内容。

这应该有效：

<div id = "container">
  <div id = "first">
    <div class=".wrapper">
      <div id = "sentence1">This is a short sentence</div>
      <div id = "sentence2">This is a very long sentence long sentence long sentence long sentence</div>
    </div>
  </div>
  <div id = "second">
    ...
  </div>
</div>

.wrapper {
  display: flex;
  width: max-content;
  flex-direction: column;
  align-items: flex-end;
}

推荐阅读