如何在css中的方框中放置一个圆圈？

Question

我有一个用 HTML 和 CSS 制作的网页，我想在其中的方形框中放置一个圆圈。这是网页的fiddle。

此时，我可以制作一个包含一些单词的正方形，但我无法在正方形框中放置一个圆圈。这是我想要的pictorial representation。

我用于方框的 HTML 和 CSS 代码是：

<div class="rectangles">
            <div class="rectangle">

                <p class="ceo">Will's profile, CEO</p>
                <p class="ceo-words">Say something inspiring will</p>
            </div>

            <div class="rectangle">

                <p class="cfo">Jacks Profile, CFO</p>
                <p class="cfo-words">Say something inspiring jack</p>
            </div>

            <div class="rectangle">

                <p class="cto">Zeeshan, CTO</p>
                <p class="cto-words">Say something inspiring </p>
            </div>

            <div class="rectangle">

                <p class="future">Whoever yall hire next</p>
                <p class="future-words">Say something inspiring </p>
            </div>
        </div>

Answer 1

使用 css 添加新元素和样式。这样您就可以在其中包含内容和图像。

.rectangles .rectangle {
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
    margin-right: 5px;
    width: 350px;
    height: 100px;
    border: 1px solid #000;
    background-color: white;
    padding: 10px 10px 10px 100px;
    position: relative;
}

.rectangles .rectangle .circle {
  background: #aaa;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  position: absolute;
  top: 20px;
  left: 20px;
}

<div class="rectangles">
    <div class="rectangle">
        <div class="circle"></div>
        <p class="ceo">Will's profile, CEO</p>
        <p class="ceo-words">Say something inspiring will</p>
    </div>

    <div class="rectangle">
        <div class="circle"></div>
        <p class="cfo">Jacks Profile, CFO</p>
        <p class="cfo-words">Say something inspiring jack</p>
    </div>

    <div class="rectangle">
        <div class="circle"></div>
        <p class="cto">Zeeshan, CTO</p>
        <p class="cto-words">Say something inspiring </p>
    </div>

    <div class="rectangle">
        <div class="circle"></div>
        <p class="future">Whoever yall hire next</p>
        <p class="future-words">Say something inspiring </p>
    </div>
</div>

Answer 2

试试这个：

.rectangle:before{
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: absolute;
    background-color: #ccc;
    top: 50%;
    transform: translateY(-50%);
}

.rectangle {
    box-sizing: border-box;
    display: inline-block;
    width: 40%;
    border:1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
    position: relative;
} 

.rectangle:before{
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: absolute;
    background-color: #ccc;
    top: 50%;
    transform: translateY(-50%);
} 

p {
    padding-left: 60px;
}

<div class="rectangles">
    <div class="rectangle">
        <p class="ceo">Will's profile, CEO</p>
        <p class="ceo-words">Say something inspiring will</p>
    </div>

    <div class="rectangle">
        <p class="cfo">Jacks Profile, CFO</p>
        <p class="cfo-words">Say something inspiring jack</p>
    </div>

    <div class="rectangle">
        <p class="cto">Zeeshan, CTO</p>
        <p class="cto-words">Say something inspiring </p>
    </div>

    <div class="rectangle">
        <p class="future">Whoever yall hire next</p>
        <p class="future-words">Say something inspiring </p>
    </div>
</div>

Answer 3

您可以使用:before 伪类来添加圆圈。

.rectangle {    
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
    margin-right: 5px;
    width: 350px;
    height: 100px;
    border: 1px solid #000;
    background-color: white;
    padding-left: 70px;
}
.rectangle:before {
    display: block;
    position: absolute;
    left: 15px;
    top: 30px;
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #eee;
}

<div class="rectangle">
    <p class="ceo">Will's profile, CEO</p>
    <p class="ceo-words">Say something inspiring will</p>
</div>

Answer 4

这是我在您的代码中所做的更改：

1. 首先jQuery和tetherjs文件必须在bootstrap之前定义才能正常工作。

2. 使用:before 伪元素将circle 添加到rectangle - 请参阅我添加的样式：

   .rectangles .rectangle {
     border-radius: 10px;
     display: inline-block;
     margin-bottom: 30px;
     margin-right: 5px;
     width: 350px;
     height: 100px;
     border: 1px solid #000;
     background-color: white;
     position: relative; /* ADDED THIS */
     padding: 15px 0 0 90px; /* ADDED THIS */
   }
   .rectangles .rectangle:before { /* ADDED THIS */
       display: block;
       position: absolute;
       top: 50%;
       left: 20px;
       transform: translateY(-50%);
       content: '';
       width: 50px;
       height: 50px;
       border-radius: 100%;
       background-color: #eee;
   }
   

这是更新后的jsfiddle 以及下面的演示：

html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
}


/**************Nav Bar Start **************/

.bg-faded {
  background-color: #1072B8;
}

.navbar-light .navbar-nav .nav-link {
  color: white !important;
}

.nav-item-insurance {
  color: white !important;
  margin-left: 20px;
  padding-top: 2px;
  font-size: 0.875em;
}

.nav-item-ourstory {
  color: white !important;
  margin-left: 20px;
  padding-top: 2px;
  font-size: 0.875em;
}

.nav-item-login-signup {
  font-size: 0.875em;
  color: white !important;
  margin-left: 20px;
  padding-top:
}

.nav-item-getcovered {
  border-color: #EF7440;
  margin-left: 10px;
  border-style: solid;
  color: white;
  padding-left: 4px;
  padding-bottom: 2.5px;
  padding-right: 4px;
  font-size: 0.750em;
  padding-top: 4.5px;
  letter-spacing: .30em;
  font-family: Adelle PE;
}

@media screen and (max-width: 991px) {
  .nav-item {
    font-family: AvantGarde;
    letter-spacing: .30em;
    color: white !important;
    margin-left: 80px;
  }
  .nav-item-getcovered {
    border-style: solid;
    border-width: 5px;
    padding-left: 40px;
    padding-right: 40px;
    width: 195px;
    border-color: #EF7440;
    margin-left: 70px;
  }
}


/**************Nav Bar Finish **************/

.container {
  width: 100% !important;
}

.col-lg-6 {
  height: 850px;
}

.sections a {
  text-decoration: none;
  position: relative;
  display: inline-block;
  color: #EF7440;
  font-family: "AvantGarde";
  font-size: 2.625em;
  font-weight: bold;
  letter-spacing: .24em;
}

.sections a:after {
  content: "";
  height: 5px;
  width: 50%;
  background-color: #EF7440;
  position: absolute;
  bottom: -.7em;
  left: 50%;
  transform: translate(-50%);
}

#insurance {
  display: flex;
  align-items: center;
  background-size: 100% 100%;
  justify-content: center;
  background-image: url(../assets/img/Uploads/insurance.png);
}

#our-story {
  display: flex;
  background-size: 100% 100%;
  align-items: center;
  justify-content: center;
  background-image: url(../assets/img/Uploads/our%20story.png);
}

#insurance:hover {
  display: flex;
  color: #EF7440;
  font-style: italic;
  align-items: center;
  justify-content: center;
  background-image: url(../assets/img/Uploads/insurance-colour.png);
  background-size: 100% 100%;
}

#insurance a:hover {
  color: #EF7440;
  text-decoration: none;
}

#our-story a:hover {
  color: #EF7440;
  text-decoration: none;
}

#our-story:hover {
  display: flex;
  color: #EF7440;
  font-style: italic;
  align-items: center;
  justify-content: center;
  background-image: url(../assets/img/Uploads/our%20story-colour.png);
  background-size: 100% 100%;
}


/*Athletes (Start) */

.athletes h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-style: italic;
  font-size: 1.250em;
  font-family: "Adelle PE";
  letter-spacing: 0.300em;
  padding-top: 40px;
  padding-bottom: 5px;
}

.athletes h2 {
  font-style: italic;
  line-height: 0.89;
  font-size: 1.250em;
  font-family: "Adelle PE";
  color: white;
  letter-spacing: 0.300em;
  padding-top: 5px;
  padding-bottom: 5px;
}

.athletes p {
  line-height: 1.379;
  font-size: 0.875em;
  font-family: "Adelle PE";
  letter-spacing: 0.300em;
  padding-top: 80px;
  padding-bottom: 70px;
}

@media screen and (max-width: 991px) {
  .athletes p {
    padding-bottom: 40px;
  }
}

.athletes h1,
.athletes h2,
.athletes p {
  margin: 0px !important;
  color: white;
}

.chris-d {
  background-image: url(../assets/img/Uploads/chris-davenport.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 384px;
}

.leticia {
  background-image: url(../assets/img/Uploads/leticia-bufoni.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 384px;
}

.leticia p,
.nfl p {
  padding-right: 650px;
}

@media screen and (max-width: 991px) {
  .nfl p {
    padding-right: 400px;
  }
}

@media screen and (max-width: 991px) {
  .leticia p {
    padding-right: 350px;
  }
}

.leticia h1,
.nfl h1,
.leticia h2,
.nfl h2,
.leticia p,
.nfl p {
  margin-left: 25px !important;
}

.chris-g {
  background-image: url(../assets/img/Uploads/chris-gunnarson.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 384px;
}

.chris-d p,
.chris-g p {
  text-align: right;
}

.chris-d h1,
.chris-g h1,
.chris-d h2,
.chris-g h2 {
  text-align: right;
}

.chris-g h1,
.chris-d h2,
.chris-g h2,
.chris-g p {
  padding-left: 740px;
  padding-right: 30px;
}

.chris-d h1 {
  padding-top: 45px;
  padding-right: 30px;
}

@media screen and (max-width: 991px) {
  .chris-g p {
    padding-left: 340px;
    padding-right: 30px;
  }
}

@media screen and (max-width: 991px) {
  .chris-g h1 {
    padding-left: 0px;
  }
}

@media screen and (max-width: 991px) {
  .chris-d h1 {
    padding-left: 0px;
  }
}

.chris-d p {
  padding-top: 40px;
  padding-left: 840px;
  padding-bottom: 40px;
  padding-right: 30px;
}

.chris-d #readmore-button-right {
  font-family: "Adelle PE";
  font-style: normal;
  width: 550px;
  float: right;
  margin-top: -10px !important;
  border-width: 3px;
  text-transform: uppercase;
  padding-top: 7px;
  padding-bottom: 7px;
  border-color: white;
  margin-right: 30px !important;
  border-style: solid;
  padding-left: 200px;
  padding-right: 200px;
  line-height: 2.109;
  font-size: 16px;
  text-align: center;
}

.chris-d #readmore-button-right:hover {
  font-style: italic;
  font-weight: bold;
}

@media screen and (max-width: 991px) {
  .chris-d p {
    padding-left: 500px;
    width: 950px;
    padding-top: 40px;
    padding-bottom: 25px;
    padding-right: 30px;
  }
}

#watch-ted-talk {
  padding-top: 10px;
  padding-bottom: 50px;
}

.marketplace-background {
  background-image: url(../assets/img/Uploads/nfl-athlete.png);
  background-size: cover;
  color: white;
  font-size: 30px;
  font-weight: bold;
  background-repeat: no-repeat;
  height: 384px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#rtm {
  text-align: center;
}


/***** Searchbar Start *****/

.form-wrapper {
  background-color: #f6f6f6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
  background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: linear-gradient(top, #f6f6f6, #eae8e8);
  border-color: #dedede #bababa #aaa #bababa;
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  -moz-box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  margin-left: auto;
  overflow: hidden;
  margin-top: 40px;
  margin-right: auto;
  padding: 8px;
  width: 450px;
}

.form-wrapper #search {
  border: 1px solid #CCC;
  -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #999;
  float: left;
  font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
  height: 50px;
  padding: 10px;
  width: 320px;
}

.form-wrapper #search:focus {
  border-color: #aaa;
  -webkit-box-shadow: 0 1px 1px #bbb inset;
  -moz-box-shadow: 0 1px 1px #bbb inset;
  box-shadow: 0 1px 1px #bbb inset;
  outline: 0;
}

.form-wrapper #search:-moz-placeholder,
.form-wrapper #search:-ms-input-placeholder,
.form-wrapper #search::-webkit-input-placeholder {
  color: #999;
  font-weight: normal;
}

.form-wrapper #submit {
  background-color: #0483a0;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
  background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
  background-image: linear-gradient(top, #31b2c3, #0483a0);
  border: 1px solid #00748f;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  color: #fafafa;
  cursor: pointer;
  height: 48px;
  float: right;
  font: 15px Arial, Helvetica;
  padding: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  width: 100px;
}

.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
  background-color: #31b2c3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
  background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
  background-image: linear-gradient(top, #0483a0, #31b2c3);
}

.form-wrapper #submit:active {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  outline: 0;
}

.form-wrapper #submit::-moz-focus-inner {
  border: 0;
}


/***** Searchbar Finish *****/


/**** Sections Start ****/

.sections {
  background-color: black;
}


/**** Contents start ****/


/**** About Homesail start ****/

.contents {
  background-color: black;
}

.about-homesail .headline-text:before {
  border-top: 1px solid #1072B8;
  display: block;
  position: relative;
  top: -25px;
  margin: 0 auto;
  width: 50%;
  content: "";
}

.about-homesail .headline-text {
  text-align: center;
  font-size: 24px;
  color: #1072B8;
  padding-top: 60px;
  font-weight: bold;
}

.about-homesail .company-info {
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 100px;
  font-style: italic;
  font-size: 20px;
  color: #1072B8;
}

.rectangles {
  margin-left: 300px;
  margin-right: 334px;
}

.rectangles .rectangle {
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 30px;
  margin-right: 5px;
  width: 350px;
  height: 100px;
  border: 1px solid #000;
  background-color: white;
  position: relative; /* ADDED THIS */
  padding: 15px 0 0 90px; /* ADDED THIS */
}
.rectangles .rectangle:before { /* ADDED THIS */
    display: block;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #eee;
}


/**** About Homesail finish ****/


/**** Departments Start *****/

.departments .headline-text:before {
  border-top: 1px solid #1072B8;
  display: block;
  position: relative;
  top: -25px;
  margin: 0 auto;
  width: 50%;
  content: "";
}

.departments .headline-text {
  text-align: center;
  font-size: 24px;
  color: #1072B8;
  padding-top: 60px;
  font-weight: bold;
}


/**** Departments Finish *****/


/**** University students start ****/

.university-students .headline-text:after {
  border-top: 1px solid #1072B8;
  display: block;
  position: relative;
  top: 40px;
  margin: 0 auto;
  width: 50%;
  content: "";
}

.university-students .headline-text {
  text-align: center;
  font-size: 24px;
  color: #1072B8;
  padding-top: 60px;
  font-weight: bold;
}

.university-students .company-info {
  padding-left: 250px;
  padding-right: 250px;
  padding-top: 100px;
  font-style: italic;
  font-size: 20px;
  color: #1072B8;
}


/**** University Students finish ****/


/**** Contents Finish ****/

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Northman | Insurance for the Wild</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="stylesheet" href="css/career.css">
   <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <div class="header">

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item-insurance">
            <a class="nav-link" href="#">About </a>
          </li>
          <li class="nav-item-ourstory">
            <a class="nav-link" href="#">Departments</a>
          </li>
          <li class="nav-item-login-signup">
            <a class="nav-link" href="#">Students</a>
          </li>

        </ul>

      </div>
    </nav>

  </div>
  <div class="marketplace-background">
    <div class="container">

      <div class="row">
        <div class="col-lg-12" id="rtm">Rethinking the marketplace </div>
      </div>
      <form class="form-wrapper">
        <input type="text" id="search" placeholder="Search for your future" required>
        <input type="submit" value="Search" id="submit">
      </form>
    </div>

  </div>

  <div class="contents">
    <div class="about-homesail">
      <p class="headline-text">About HomeSail</p>
      <p class="company-info">aha hahahah ahahahhaha hahhahhahh hahahhh hhhahah hha hahhha hahhhah ahhhhahah ahhhhhhahq ieihfiefpje hahahahhaha ahahahhaha hahhahhahh hahahhh hhhahah hha hahhha hahhhah ahhhhahah ahhhhhhahqabcded hahaha ahahahhahaaaaaasde hahhahhahh hahahhh hhhahah
        hha hahhha hahhhah ahhhhahah ahhhhhhahq hahahah ahahahhaha hahhahhahh hahahhhaefgh hhhahah hha hahhha hahhhah ahhhhahah ahhhhhhahq hahahah ahahahhaha hahhahhahh
      </p>

    </div>

    <div class="rectangles">
      <div class="rectangle">

        <p class="ceo">Will's profile, CEO</p>
        <p class="ceo-words">Say something inspiring will</p>
      </div>

      <div class="rectangle">

        <p class="cfo">Jacks Profile, CFO</p>
        <p class="cfo-words">Say something inspiring jack</p>
      </div>

      <div class="rectangle">

        <p class="cto">Zeeshan, CTO</p>
        <p class="cto-words">Say something inspiring </p>
      </div>

      <div class="rectangle">

        <p class="future">Whoever yall hire next</p>
        <p class="future-words">Say something inspiring </p>
      </div>
    </div>



    <div class="departments">
      <p class="headline-text">Departments</p>
    </div>


    <div class="university-students">
      <p class="headline-text">University Students</p>
      <p class="company-info">Homesail was the brainchild of two university students, that's why here at HomeSail we understand the value of ... blah blah write whatever you want here More text you get the idea make yourselves look good and soo on
      </p>

    </div>
  </div>
</body>
</html>

Answer 5

也可以使用这个解决方案

div:first-of-type{
  height:200px;
  width:200px;
  border:1px solid black;
  position:relative;
}

.square>div:nth-of-type(1){
  border-radius:50%;
  height:100%;
  width:100%;
  border:1px solid black;
}

<div class="square">
  <div class="circle">
    
  </div>
</div>