时间戳

首页 > 解决方案 > 元素应该在换行符上时移动到 Div 的右侧

html - 元素应该在换行符上时移动到 Div 的右侧

问题描述

我正在为我的个人网站编写一些 HTML 页面，但我遇到了一个问题，即新元素不是从换行符开始，而是从包含图片库的 div 的右侧开始。

这比我解释的要容易，所以这里是一个屏幕截图...... html 不需要的行为

如您所见，我想要画廊 div 下面的圆圈元素是代码

<div id="gallerydiv">
            <div class="gallery">
                <a target="_blank" href="../AppDev images/java1.png">
                    <img src="../AppDev images/java1.png" alt="ToDo1" width="600" height="400"/>
                </a>
                <div class="desc">Application with basic functionality</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_10.png">
                    <img src="../AppDev images/Screenshot_10.png" alt="ToDo10" width="600" height="400"/>
                </a>
                <div class="desc">New file prompt</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_11.png">
                    <img src="../AppDev images/Screenshot_11.png" alt="ToDo11" width="600" height="400"/>
                </a>
                <div class="desc">File deletion prompt</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_12.png">
                    <img src="../AppDev images/Screenshot_12.png" alt="ToDo12" width="600" height="400"/>
                </a>
                <div class="desc">New ticket prompt</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_13.png">
                    <img src="../AppDev images/Screenshot_13.png" alt="ToDo13" width="600" height="400"/>
                </a>
                <div class="desc">Ticket deletion prompt</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_14.png">
                    <img src="../AppDev images/Screenshot_14.png" alt="ToDo14" width="600" height="400"/>
                </a>
                <div class="desc">Complete Ticket Prompt</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_1.png">
                    <img src="../AppDev images/Screenshot_1.png" alt="ToDo1" width="600" height="400"/>
                </a>
                <div class="desc">Adding some tickets to complete</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_2.png">
                    <img src="../AppDev images/Screenshot_2.png" alt="ToDo2" width="600" height="400"/>
                </a>
                <div class="desc">Completing tickets</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_3.png">
                    <img src="../AppDev images/Screenshot_3.png" alt="ToDo3" width="600" height="400"/>
                </a>
                <div class="desc">Complete section functional</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_4.png">
                    <img src="../AppDev images/Screenshot_4.png" alt="ToDo4" width="600" height="400"/>
                </a>
                <div class="desc">Ticket formatting complete</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_7.png">
                    <img src="../AppDev images/Screenshot_7.png" alt="ToDo7" width="600" height="400"/>
                </a>
                <div class="desc">Adding images for buttons</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_6.png">
                    <img src="../AppDev images/Screenshot_6.png" alt="ToDo6" width="600" height="400"/>
                </a>
                <div class="desc">Change directory dialog</div>
            </div>
            <div class="gallery">
                <a target="_blank" href="../AppDev images/Screenshot_9.png">
                    <img src="../AppDev images/Screenshot_9.png" alt="ToDo9" width="600" height="400"/>
                </a>
                <div class="desc">Finished product</div>
            </div>
        </div>

        <div>
            <p>Essentially how this app works is by storing the tickets in text files inside the working directory. Then by using tags similar to HTML the individual tickets can be pulled and stored.</p>
            <br height="500px">
            <h2>Advanced Youtube Search</h2>
        </div>

和造型...

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  height: 190px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

#gallerydiv {
    width: 1000px;
    margin: auto;
}

我已经尝试过向 br 发送垃圾邮件并将画廊宽度设置为 100%，但我尝试过的任何方法都没有明显效果。

标签： htmlcss

解决方案

尝试将相同的样式添加到<p>和<h2>那些不合时宜的样式。例如，在 HTML 中：

<div class="unknown">
    <p>Essentially how this app works is by storing the tickets in text files inside the working directory. Then by using tags similar to HTML the individual tickets can be pulled and stored.</p>
    <br height="500px">
    <h2>Advanced Youtube Search</h2>
</div>

CSS：

div.unknown {

      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      width: 180px;
      height: 190px;
}

那应该工作...

推荐阅读