Загрузочный сайт с одним столбцом - PullRequest
Новая
       35

Загрузочный сайт с одним столбцом

0 голосов
/ 27 марта 2019

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

Примечание: я не включил ничего, что работает.Это контент страницы, который делает что-то странное (потому что я это сделал!)

HTML: 

<div class="container">
<h1>the first H1 string of text</h1>    
<img src="images/1.jpg" class="img-right .img-fluid" alt="1st pic">
<p>This is the copy for the first paragraph with an image to the right of it with a max width of 325 pixels. The rest of the page content will typically have text to one side and an acompanying image to the other. Sometime it will be two or three with the pics on the same side. It seems that at 768 and smaller, the pic should be on its own line. Otherwise, the wrapped copy looks bad with single words down the left. Above 768, this code appears to work alright, but I know it's not right.</p>
<ul>
<li>First point to be made</li>
<li>Second point to be made</li>
<li>Third point to be made</li>
</ul>
</div>

<div class="container">
<h2>the first H2 string of text... a little smaller as a subheading</h2>    
<img src="images/2.jpg" class="img-left .img-fluid" alt="2nd pic"
<ul>
<li>These bullets are to be to the left this time</li>
<li>The pic is to be to the right</li>
<li>I found that something strange happens without "<p></p>" inserted above these line's <ul> tag.</li>
<li>I have no idea why though</li>
</ul>
</div>

<div class="container">
<h1>This is another header</h1> 
<div class="card img-right" style="width: 25rem;">
<img class="card-img-top" src="images/3.jpg" alt="pic 3">
<div class="card-body">
<div class="card-text">
<ul>
<li>I used a card in hopes of easily adding a caption to the image</li>
<li>Thank you very much for looking at this and helping me!</li>
</ul>
</div>
</div>
</div>

CSS: 

@charset "utf-8";
.content {
    max-width: 1440px;
    margin: auto;
    background-color: #FFFFFF;
}
p {
margin-top: 1.5rem;
margin-left: 1.5rem;    
margin-right: 1.5rem;   
}
h1 {
    font-size: 1.7em;
    font-weight: bold;
    color: #716946;
    margin-top: 1.5rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    text-align: center;
}
h2 {
    font-size: 1.4em;
    font-weight: bold;
    color: #716946;
    margin-top: 1.5rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}
.img-right    {
    float: right;
    margin-left: 1.5rem;
    box-shadow: 2px 2px 5px 0px #454545;
    -webkit-box-shadow: 2px 2px 5px 0px #454545;
    margin-bottom: 1rem;
    margin-right: 1.5rem;

}
ul {
    margin-top: -15px;
    padding-top: 0px;
    margin-bottom: 0px;
    font-weight: 400;
    font-size: 7.rem;
}
.img-left {
    float: left;
    margin-left: 1.5rem;
    -webkit-box-shadow: 2px 2px 5px 0px #454545;
    box-shadow: 2px 2px 5px 0px #454545;
    margin-bottom: 0px;
    margin-right: 4rem;
}
.card-body ul {
    margin-left: -30px;
    margin-top: -15px;

Ищете отзывчивыйпоказать, где текст отображается правильно.

--- Copy paragraph on left, wrapping pic on right ----
--- Pic on left wrapped with paragraph copy on right ---
--- Copy paragraph on left, wrapping pic on right ----
--- Pic on left wrapped with paragraph copy on right ---
etc.
...