2023年7月11日 02:10:13go评论62阅读模式

英文:

Textarea is overlapping with image

问题

我正在尝试创建一个简单的布局，其中包含一个投票按钮，但文本区域与图像重叠。

以下是我的示例代码：

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
.my-component-row {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(247, 247, 248, 1);
}

.my-component-container {
  display: flex;
  align-items: flex-start;
  width: 800px;
  padding: 10px;
}

.my-component-icon {
  width: 24px;
  height: 24px;
  margin-right: 15px;
}

.my-component-textbox {
  flex-grow: 1;
  border: none;
  outline: none;
}

.upvote-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

.upvote-button {
  font-size: 2rem;
  background: none;
  border: none;
}

.view-count {
  margin-top: 10px;
}

.upvote-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

<!-- language: lang-html -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootstrap Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css" rel="stylesheet">
</head>

<body style="margin-bottom: 32px;">
  <header class="p-3 border-bottom sticky-top bg-white">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none" style="
          font-size: 30px;
          color: black;
      ">
              Test<sup style="font-size: 12px; color: black; margin-left: 5px;">BETA</sup>
            </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li>
            <a href="http://127.0.0.1:8000/latest" class="nav-link px-2 link-body-emphasis" style="margin-left: 20px;">Text</a>
          </li>
        </ul>
      </div>
    </div>
  </header>

  <div class="container mt-5">

    <!-- IMAGE -->
    <div class="row">
      <div class="col-md-6 d-flex align-items-center justify-content-center">
        <div class="upvote-section">
          <button id="upvote-button" class="btn btn-outline-secondary upvote-button">
                    <i class="bi bi-arrow-up-square-fill"></i>
                </button>
          <div class="view-count"><span id="view-count">2</span></div>
        </div>
        <img src="https://via.placeholder.com/500x300" alt=""
          class="img-fluid ml-3">
      </div>
      <div class="col-md-6">
        <textarea id="prompt-text" class="form-control" style="width: 100%;" rows="4" readonly="">**&lt;https://s.mj.run/wNoQuLDjphY&gt; Darth Vader, cinematic light, Artist Rembrandt Harmenszoon van Rijn, oil painting, high detail, realistic render, octane render, 4k, 8k, realism, cinematic lighting, dramatic --aspect 5:3 --uplight** - Upscaled (Light) by &lt;@803576493681934346&gt;</textarea>
        <button id="copy-prompt" class="btn btn-primary mt-3">Copy Prompt</button>
      </div>
    </div>
  </div>

  <footer class="bg-white py-3 mt-5">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <p class="text-center">
            &#169;<span id="currentYear">2023</span>
          </p>
        </div>
      </div>
    </div>
  </footer>
</body>

<!-- end snippet -->

文本区域与图像重叠的问题可能出现在以下原因之一：

CSS 样式未正确定义：请确保您的 CSS 样式未导致文本区域和图像重叠。您可以调整样式以适应您的布局需求。
图像和文本区域的容器宽度：检查图像和文本区域的容器宽度，确保它们没有重叠。可以通过调整容器的宽度或使用 CSS 属性来解决。
图像和文本区域的外边距和内边距：检查图像和文本区域的外边距和内边距，确保它们不会导致重叠。您可以通过调整外边距和内边距来解决此问题。
响应式设计：如果您的布局是响应式的，请确保在不同屏幕尺寸下没有重叠问题。

您可以根据上述建议检查和调整您的布局，以解决文本区域与图像重叠的问题。希望这些提示对您有所帮助！

英文:

I am trying to create a simple layout with an upvote button, but the textarea overlaps with the image.

Here is my sample code:

.my-component-row {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(247, 247, 248, 1);
}
.my-component-container {
display: flex;
align-items: flex-start;
width: 800px;
padding: 10px;
}
.my-component-icon {
width: 24px;
height: 24px;
margin-right: 15px;
}
.my-component-textbox {
flex-grow: 1;
border: none;
outline: none;
}
.upvote-section {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
}
.upvote-button {
font-size: 2rem;
background: none;
border: none;
}
.view-count {
margin-top: 10px;
}
.upvote-section {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
}

&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;!-- Bootstrap Icons --&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;/head&gt;
&lt;body style=&quot;margin-bottom: 32px;&quot;&gt;
&lt;header class=&quot;p-3 border-bottom sticky-top bg-white&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start&quot;&gt;
&lt;a href=&quot;/&quot; class=&quot;d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none&quot; style=&quot;
font-size: 30px;
color: black;
&quot;&gt;
Test&lt;sup style=&quot;font-size: 12px; color: black; margin-left: 5px;&quot;&gt;BETA&lt;/sup&gt;
&lt;/a&gt;
&lt;ul class=&quot;nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;http://127.0.0.1:8000/latest&quot; class=&quot;nav-link px-2 link-body-emphasis&quot; style=&quot;margin-left: 20px;&quot;&gt;Text&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;container mt-5&quot;&gt;
&lt;!-- IMAGE --&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-6 d-flex align-items-center justify-content-center&quot;&gt;
&lt;div class=&quot;upvote-section&quot;&gt;
&lt;button id=&quot;upvote-button&quot; class=&quot;btn btn-outline-secondary upvote-button&quot;&gt;
&lt;i class=&quot;bi bi-arrow-up-square-fill&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;div class=&quot;view-count&quot;&gt;&lt;span id=&quot;view-count&quot;&gt;2&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;img src=&quot;https://via.placeholder.com/500x300&quot; alt=&quot;&quot;
class=&quot;img-fluid ml-3&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;textarea id=&quot;prompt-text&quot; class=&quot;form-control&quot; style=&quot;width: 100%;&quot; rows=&quot;4&quot; readonly=&quot;&quot;&gt;**&amp;lt;https://s.mj.run/wNoQuLDjphY&amp;gt; Darth Vader, cinematic light, Artist Rembrandt Harmenszoon van Rijn, oil painting, high detail, realistic render, octane render, 4k, 8k, realism, cinematic lighting, dramatic --aspect 5:3 --uplight** - Upscaled (Light) by &amp;lt;@803576493681934346&amp;gt;&lt;/textarea&gt;
&lt;button id=&quot;copy-prompt&quot; class=&quot;btn btn-primary mt-3&quot;&gt;Copy Prompt&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;footer class=&quot;bg-white py-3 mt-5&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-12&quot;&gt;
&lt;p class=&quot;text-center&quot;&gt;
&#169;&lt;span id=&quot;currentYear&quot;&gt;2023&lt;/span&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/footer&gt;
&lt;/body&gt;

The textarea is overlapping with the image, however I do not understand why?

Any suggestions why I get this error?

I appreciate your replies!

答案1

得分: 2

在你的情况下，设置img { min-width: 0; }或img { overflow: hidden; } - 这将有助于正确压缩图像：

img {
  min-width: 0;
}

请注意，这是CSS代码，用于调整图像的最小宽度。

英文:

In your case, set img { min-width: 0; } or img { overflow: hidden; } - this will help so that the image is compressed properly:

.my-component-row {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(247, 247, 248, 1);
}
.my-component-container {
display: flex;
align-items: flex-start;
width: 800px;
padding: 10px;
}
.my-component-icon {
width: 24px;
height: 24px;
margin-right: 15px;
}
.my-component-textbox {
flex-grow: 1;
border: none;
outline: none;
}
.upvote-section {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
}
.upvote-button {
font-size: 2rem;
background: none;
border: none;
}
.view-count {
margin-top: 10px;
}
.upvote-section {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
}
img {
min-width: 0;
}

&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;!-- Bootstrap Icons --&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;/head&gt;
&lt;body style=&quot;margin-bottom: 32px;&quot;&gt;
&lt;header class=&quot;p-3 border-bottom sticky-top bg-white&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start&quot;&gt;
&lt;a href=&quot;/&quot; class=&quot;d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none&quot; style=&quot;
font-size: 30px;
color: black;
&quot;&gt;
Test&lt;sup style=&quot;font-size: 12px; color: black; margin-left: 5px;&quot;&gt;BETA&lt;/sup&gt;
&lt;/a&gt;
&lt;ul class=&quot;nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;http://127.0.0.1:8000/latest&quot; class=&quot;nav-link px-2 link-body-emphasis&quot; style=&quot;margin-left: 20px;&quot;&gt;Text&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;container mt-5&quot;&gt;
&lt;!-- IMAGE --&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-6 d-flex align-items-center justify-content-center&quot;&gt;
&lt;div class=&quot;upvote-section&quot;&gt;
&lt;button id=&quot;upvote-button&quot; class=&quot;btn btn-outline-secondary upvote-button&quot;&gt;
&lt;i class=&quot;bi bi-arrow-up-square-fill&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;div class=&quot;view-count&quot;&gt;&lt;span id=&quot;view-count&quot;&gt;2&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;img src=&quot;https://via.placeholder.com/500x300&quot; alt=&quot;&quot;
class=&quot;img-fluid ml-3&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;textarea id=&quot;prompt-text&quot; class=&quot;form-control&quot; style=&quot;width: 100%;&quot; rows=&quot;4&quot; readonly=&quot;&quot;&gt;**&amp;lt;https://s.mj.run/wNoQuLDjphY&amp;gt; Darth Vader, cinematic light, Artist Rembrandt Harmenszoon van Rijn, oil painting, high detail, realistic render, octane render, 4k, 8k, realism, cinematic lighting, dramatic --aspect 5:3 --uplight** - Upscaled (Light) by &amp;lt;@803576493681934346&amp;gt;&lt;/textarea&gt;
&lt;button id=&quot;copy-prompt&quot; class=&quot;btn btn-primary mt-3&quot;&gt;Copy Prompt&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;footer class=&quot;bg-white py-3 mt-5&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-12&quot;&gt;
&lt;p class=&quot;text-center&quot;&gt;
&#169;&lt;span id=&quot;currentYear&quot;&gt;2023&lt;/span&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/footer&gt;
&lt;/body&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Textarea与图片重叠。

问题

答案1

点击菜单时更改 ::after 背景

如何编写使一个 div/对象围绕另一个对象/div 旋转，并产生3D效果的代码

如何选择页面上具有与所有其他按钮相同类的一个按钮？

在NextJS中为特定页面创建不同的布局

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论