Не удается разделить текст и изображение веб-страницы с помощью сетки (CSS)

ProgramBox

Не удается разделить текст и изображение веб-страницы с помощью сетки (CSS)

Post author:admin
Запись опубликована:1 сентября, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

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

 * {
    padding: 0;
    margin: 0;
}

.top-content {
    height: 50vh;
    width: 100%;
    position: relative;
}

.top-content img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.nav-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: orange;
    position: relative;
    width: 100%;
}

.nav-bar li {
    float: left;
}

.nav-bar a {
    display: block;
    color: black;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

.nav-bar a:hover {
    background-color: white;
}

.author {
    position: absolute;    
    top: 70%;
    left: 43%;
    transform: translate(-50, -6);
    color: white;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    border: 3px solid #ffffff;
    border-radius: 10px;
    text-align: center;
}

.photo img {
    height: 100%;
    width: 25%;
    object-fit: cover;
}

.main-content {
    padding: 10px 0px;
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: auto;
    padding: 80px 0px;
    display: grid;
    grid-template-columns: repeat(1, 400px);
}

.main-content h1 {
    font-size: 40px;
}

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="stylesheets/practice3.css">
        <title>practice3</title>
    </head>
    <body>
        <header>
            <div class="top-content">
                <ul class="nav-bar">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">News</a></li>
                </ul>
                <img src="./imgs/helping.jpg" alt="photo">
                <div class="author">
                <h1>ARC Ulster green</h1>
                <h3>Always there, Always Caring</h3>
            </div>
            </div>
        </header>
        <main>
            <div class="main-content">
                <h1>We Strive to touch hearts</h1>
                <h3 class="two">Each and every day</h3>
                <p>Since the begining our support staff have shown
                a dedication to helping people and bettering their lifes.
                and as a consiquence our individuals feel more confident 
                and happy than ever. As we continue our mission to help those
                who need it we have seen our individuals prosper to become
                independent living in the community among the rest of the world.
                we are proud to serve our community not only because we care, but also 
                because we want to see our individuals live long happy lives
                with joy and laughter while they learn valuable skills in the proccess.
                everyday our staff walks into their job site ready, willing, and
                confident that they will complete their mission to provide
                the best care around and that is an ARC gaurentee. as we always 
                strive to beat expectations and go above and beyond for those in our care.
                 </p>
            </div>
            <div class="photo">
                <img src="./imgs/staff.jpg" alt="staff">
            </div>
        </main>
    </body>
</html>

Ответ №1:

предыдущий комментарий: main{display:flex;} было бы началом, а не плавающим.

вот гибкий дисплей с несколькими исправлениями :

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

main {
  display: flex;
  overflow:hidden;
}

.top-content {
  height: 50vh;
  position: relative;
}

.top-content img {
  height: 90%;
  width: 100%;
  object-fit: cover;
}

.nav-bar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: orange;
  position: relative; 
}

.nav-bar li {
  float: left;
}

.nav-bar a {
  display: block;
  color: black;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

.nav-bar a:hover {
  background-color: white;
}

.author {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%);
  color: white;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  border: 3px solid #ffffff;
  border-radius: 10px;
  text-align: center;
}

.photo { 
}

.photo img {
  height: 100%;
  object-fit: contains;
}

.main-content {
  flex: 2;
  padding: 50px 0px;
  display: flex;
  flex-direction:column;
  justify-content: space-between; 
  margin: auto;  
  min-height:400px;
}

.main-content h1 {
  font-size: 40px;
}

 <header>
  <div class="top-content">
    <ul class="nav-bar">
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">News</a></li>
    </ul>
    <img src="https://i.picsum.photos/id/1027/200/400.jpg?hmac=YJeQQGOomEy2UFSz-q6NCey-QQwgmugsBRRlhCjfCB0" alt="photo">
    <div class="author">
      <h1>ARC Ulster green</h1>
      <h3>Always there, Always Caring</h3>
    </div>
  </div>
</header>
<main>
  <div class="main-content">
    <h1>We Strive to touch hearts</h1>
    <h3 class="two">Each and every day</h3>
    <p>Since the begining our support staff have shown a dedication to helping people and bettering their lifes. and as a consiquence our individuals feel more confident and happy than ever. As we continue our mission to help those who need it we have seen
      our individuals prosper to become independent living in the community among the rest of the world. we are proud to serve our community not only because we care, but also because we want to see our individuals live long happy lives with joy and laughter
      while they learn valuable skills in the proccess. everyday our staff walks into their job site ready, willing, and confident that they will complete their mission to provide the best care around and that is an ARC gaurentee. as we always strive
      to beat expectations and go above and beyond for those in our care.
    </p>
  </div>
  <div class="photo">
    <img src="https://i.picsum.photos/id/1027/200/400.jpg?hmac=YJeQQGOomEy2UFSz-q6NCey-QQwgmugsBRRlhCjfCB0" alt="staff">
  </div>
</main>

Ответ №2:

вы можете поместить display:flex (автоматически установит направление на flex-row) на основной:

 main{
  display: flex;
}

и если вы удалите width:25% из .photo img, вы увидите полное изображение