Question

我试图重现这个网站：

我现在在这里，我将解释为什么我会挣扎

林做到这一点的方式挣扎，我可以移动接近标志保证金打的描述，但是当我移动屏幕上的一切会被搞砸的大小，我觉得它不是正确的动做。我试图使用flex-boxe，但我觉得我搞砸了整个部分，我应该重新开始，我现在向你展示大局：

这里是所有部分的全部代码

<div class="container-services_display">        
        <img src="images/main-feature.png">

                <div class="circle">
                    <div class="icon_placement">
                        <i class="material-icons">android</i>
                    </div>
                        <div class="icon_placement2 ball_design"> 
                            <i class="fas fa-circle"></i>
                        </div>
                </div> 
                        <div class="description-services_right">
                            <h2> UX design </h2>
                            <p>Coucou les amis je suis entrain de faire un site chiant</p>
                            <p>Coucou les amis je suis entrain de faire un site chiant</p>
                        </div>                       
    </div>

的CSS：

.container-services_display

{
    margin-top: 110px;
    display: flex;
    justify-content: space-around;
}


.ball_display

{
    display: flex;
    justify-content: center;
}


.ball_design

{
    color: rgb(82, 162, 201);
    font-size: 14px;
}


.circle 

{
    width: 75px;
    height: 75px;
    background-color: white;
    border-radius: 75px;
    border: 1px solid rgb(237, 238, 239, 1);
    border-opacity: 0.5;
}


.icon_placement

{
    position: relative;
    left: 24px;
    top: 22px;
    color: rgb(96, 174, 209);
}


.icon_placement2

{
    position: relative;
    left: 68px;
}

所以基本上它是一个容器上的包装器，我试图在水平上用flex展示它并且它们将它放置但是我觉得我想念它的一部分，我会做的是为徽标+描述制作另一个div再次使用flex进行显示但看起来它不起作用，我只需要一些提示并抱歉我只有不到20小时的css = D

Answer 1

因为您正在使用css flex，所以如果您想要间距

，则需要添加flex: 1和少量边距

.description-services_right {
    flex: 1;
    margin-left: 20px;
}

请参阅fiddle

如果你想使用bootstrap

，这里是bootstrap版本

.side-pic{
    max-width: 100%;
    width: 100px;
    height: auto;
}
.mtop{
  margin-top: 20px;
}
.side-pic-holder{
  text-align: center;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">

  <div class="col-md-2 side-pic-holder">
    
      <img class="side-pic" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" />
    
  </div>
  <div class="col-md-10">
    <h4>some title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet</p>
  </div>
  
</div>

<div class="row mtop">

  
  <div class="col-md-10">
    <h4>some title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet</p>
  </div>
  <div class="col-md-2 side-pic-holder">
    
      <img class="side-pic" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" />
    
  </div>
  
</div>
</div>

确保将其视为full screen

Answer 2

媒体查询

为了拥有一个干净且响应迅速的网站，您需要使用一些媒体查询。如果您不熟悉Media Query，check it out here。

在媒体查询中，您可以定义CSS类和样式通常，唯一的区别是它只会应用于条件是真的。例如：如果屏幕宽度小于768px

@media(max-width: 768px){
  .description-services_right{
  width: 100%;
  }
}

自举

还有一种方法，可能是使用Bootstrap 3/4更简单快捷，如果你从未听说过Bootstrap，你可以read their Doc here。

Bootstrap可让您只需添加即可创建快速响应式网站 HTML元素的预制类。

Bootstrap最大优势是它的网格系统，在我做出太多解释之前你应该检查一下你是否感兴趣。

我创建了两个笔，我在其中编写了代码响应，我保留了所有HTML元素，但删除了所有不必要的CSS。

您甚至可以比较我制作的Bootstrap和Non-Bootstrap版本，以查看您可以避免的编码量。

Pen without Bootstrap

Pen with bootstrap

And here a Demo how Bootstraps Grid System works

不是css的正确方法？

2 个答案:

媒体查询

自举