Question

我目前正在用React Js编写页面。因为我是Webdevlopement的新手，尤其是CSS，所以在被困之前只写了一页。我创建了两个div，一个在左边，一个在右边，并想在左边的区域放置一个图像，在右边的区域放置一个带有下面链接的段落。我希望项目在页面中间彼此相邻。如何在CSS中设置样式？

Answer 1

如果使用Bootstrap Css库，则可以通过这种方式获得它。您可以访问How To Include Bootstrap In HTML

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-6  bg-dark">
      <img src="https://imgur.com/gallery/CSf68dv"/>
    </div>
    <div class="col-6 bg-info">
     <p>
     Paragrapgh
     </p> 
    </div>
  </div>
</div>

小提琴链接here

Answer 2

这里是一个自定义代码解决方案，没有任何框架。方便快捷地进行自定义，此外，我还提供了我的评论，以帮助您了解CSS的每个步骤。

.title, .navbar {
  width: 100%;
  height: 100px;
  display: flex;
}

.title {
  background: #000;
  color: #FFF;
  align-items: center;
  justify-content: center;
}

.navbar {
  justify-content: flex-start;
  align-items: center;
  height: 70px!important;
}

.navbar a {                                   /* custom styling of navbar items, as they are links we need to remove the default styling of blue and underlined */
  text-decoration: none!important;
  color: #000!important;
  margin: 0 60px;
}

.navbar a:hover {              /* underline each nav item link on hover basic cool effect */
  text-decoration: underline!important;
}

.wrapper {
  display: flex;
  width: 100%;
}

.box {           /* give the wrapper a width of 100% and each of the 2 equal-width box 50% */
  width: 50%;
  height: 500px;
  display: flex; /* display set to flex to we can automatically align vertically (align-items) and horizontally (justify-content:) */
  align-items: center;
}

.box1 {
  justify-content: flex-end; /* align the content of box one to the END of the flexbox (which is in the middle precisely */
}

.box2 {                          /* same for box2 content but now to the START of the flexbox */
  justify-content: flex-start;
}

.box1 img {         /*style the image size the same as the sub-box that contains the paragraph and the link to page in box2 */ /* that's it! */
  height: 200px;
  width: 50%;
}

.sub-box {
  height: 200px;
  width: 50%;
  display: flex;
  flex-direction: column;
  margin: 15px;
}

<div class="title">Page Title</div>
<div class="navbar">
    <a href="#">Home</a>
    <a href="#">Fun</a>
    <a href="#">Blog</a>
    <a href="#">Something</a>
</div>
<div class="wrapper"> <!-- create a main container div for the 2 boxes -->
    <div class="box box1"> <!-- each of the 2 boxes has a common class called "box" that we will style in tyhe CSS code -->
        <img src="http://dev.laurentchevrette.digital/images/oranges.jpg">
        </div>
        <div class="box box2">
            <div class="sub-box"> <!-- here we create an extra div/box in which we put the paragraph of text and the link to the page to easily style them later -->
                <span>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere.</span>
                <a href="#">Link to page</a>
            </div>
        </div>
    </div>

两个Divs彼此相邻，并且其项目彼此相邻

2 个答案: