Элементы перемещены справа от Div, когда они должны быть на новой строке

Question

Я пишу несколько HTML страниц для своего личного веб-сайта, но столкнулся с проблемой, что новые элементы не начинаются с новой строки, а начинаются справа от div, содержащего галерею изображений.

это легче показать, чем объяснять мне, так что вот скриншот ...

Как видите, я хочу, чтобы элементы в кружке под 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%, но ничего из того, что я пробовал, явно не сработало.

Answer 1

Добавьте класс clearfix в свой div. Это переместит ваш следующий div в новую строку.

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

    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;
    }
    
    div.clearfix::after {
        content: "";
        clear: both;
        display: table;
    }
    
    div.mydiv {
        width: 1000px;
        margin: auto;
    }

    <div id="gallerydiv"  class="clearfix">
        <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 class="mydiv">
        <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>

Answer 2

Попробуйте добавить те же стили к <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;
}

Это должно работать ...