如何在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

试试这个：

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用Basemap伪类添加圆圈。

: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;
}

Answer 3

使用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 4

以下是我在代码中更改的内容：

1. 首先必须在jQuery之前定义tether和bootstrap个js文件才能使其正常工作。

2. 使用circle psuedo元素向:before添加了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以及下面的演示：

＆＃13;
＆＃13;
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 ****/
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;