CSS：在图像div上放置选中的图标div

Question

我有一些图像，当我点击它时，会出现一个绿色勾选的图标。但我不能使自己的立场合适。

＆＃13;

＆＃13;

.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
	width: 605px;
	margin: 0 auto;
	height: 245px;
	overflow-x: hidden;
	overflow-y: auto;
}
.speakers_list .speaker_div {
	width: 75px;
	height: 75px;
	margin: 0 auto;
}
.speakers_list .speaker_div img {
	height: 100%;
	width: 100%;
}
.speakers_list .speaker_div .speaker_name {
	color: #999999;
	font-size: 10.61px;
}
.speakers_list .selected_div {
	position: absolute;
	width: 20px;
	height: 20px;
	background: #27c24c;
	border: thin white solid;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="selected_div">
            <i class="fa fa-check text-white"></i>
        </div>
        <div class="speaker_div">
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 1 </span>
        </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="speaker_div">
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 2 </span>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望绿色div位于右上方并且勾选标记为绿色div的中心，并且也应该响应。

任何帮助都会很棒。

谢谢。

Answer 1

下面是更新的代码段

$this->config->set_item('permitted_uri_chars','');

.p-t-md{
padding-top:20px;
}

.p-l-md{
padding-left:20px;
}


.speakers_list {
	width: 605px;
	margin: 0 auto;
	height: 245px;
	overflow-x: hidden;
	overflow-y: auto;
}

.speakers_list .speaker_div {
	width: 75px;
	height: 75px;
	margin: 0 auto;
}

.speakers_list .speaker_div img {
	height: 100%;
	width: 100%;
}

.speakers_list .speaker_div .speaker_name {
	color: #999999;
	font-size: 10.61px;
}

.speakers_list .selected_div {
	position: absolute;
	width: 20px;
	height: 20px;
	background: #27c24c;
	border: thin white solid;
  right: 5px;
    top: 5px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
}

Answer 2

将right: 0;添加到.speakers_list .selected_div

.p-t-md{
padding-top:20px;
}

.p-l-md{
padding-left:20px;
}


.speakers_list {
	width: 605px;
	margin: 0 auto;
	height: 245px;
	overflow-x: hidden;
	overflow-y: auto;
}

.speakers_list .speaker_div {
	width: 75px;
	height: 75px;
	margin: 0 auto;
}

.speakers_list .speaker_div img {
	height: 100%;
	width: 100%;
}

.speakers_list .speaker_div .speaker_name {
	color: #999999;
	font-size: 10.61px;
}

.speakers_list .selected_div {
	position: absolute;
  right: 0;
	width: 20px;
	height: 20px;
	background: #27c24c;
	border: thin white solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<div class="row speakers_list p-t-md p-l-md" >
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 1 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 2 </span>
                            </div>
                          </div>
                         
                         
                        </div>

Answer 3

.p-t-md {
    padding-top: 20px;
}
.p-l-md {
    padding-left: 20px;
}
.speakers_list {
    width: 605px;
    margin: 0 auto;
    height: 245px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    text-align: center;
}
.speakers_list .speaker_div {
    width: 75px;
    height: 75px;
    margin: 0 auto;
}
.speakers_list .speaker_div img {
    height: 100%;
    width: 100%;
}
.speakers_list .speaker_div .speaker_name {
    color: #999999;
    font-size: 10.61px;
}
.speakers_list .selected_div {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: #27c24c;
    border: thin white solid;
    color: #ffffff;
    border-radius: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<div class="row speakers_list p-t-md p-l-md" >
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 1 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                          <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 2 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                          <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 3 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                          <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 4 </span>
                            </div>
                          </div>
                         
                         
                        </div>

我希望这会对你有所帮助。

Answer 4

请参阅此代码：

＆＃13;

＆＃13;

.p-t-md{
padding-top:20px;
}

.p-l-md{
padding-left:20px;
}


.speakers_list {
	width: 605px;
	margin: 0 auto;
	height: 245px;
	overflow-x: hidden;
	overflow-y: auto;
}

.speakers_list .speaker_div {
	width: 75px;
	height: 75px;
	margin: 0 auto;
    position: relative;
}

.speakers_list .speaker_div img {
	height: 100%;
	width: 100%;
}

.speakers_list .speaker_div .speaker_name {
	color: #999999;
	font-size: 10.61px;
}

.speakers_list .selected_div {
	position: absolute;
	width: 20px;
	height: 20px;
	background: #27c24c;
	border: thin white solid;
    border-radius: 50%;
    right: 0px;
    padding-left: 3px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<div class="row speakers_list p-t-md p-l-md" >
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="speaker_div">
                             <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 1 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 2 </span>
                            </div>
                          </div>
                         
                         
                        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

看这个

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="speaker_div">
            <div class="selected_div">
                <i class="fa fa-check text-white"></i>
            </div>
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 1 </span>
        </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="speaker_div">
            <div class="selected_div">
                <i class="fa fa-check text-white"></i>
            </div>
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 2 </span>
        </div>
    </div>
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="speaker_div">
            <div class="selected_div">
                <i class="fa fa-check text-white"></i>
            </div>
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 2 </span>
        </div>
    </div>
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="speaker_div">
            <div class="selected_div">
                <i class="fa fa-check text-white"></i>
            </div>
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 2 </span>
        </div>
    </div>
    </div>


</div>

.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
    margin: 0 auto;
    height: 245px;
    overflow-x: hidden;
    overflow-y: auto;
}
.speakers_list .speaker_div {
    width: 75px;
    height: 75px;
    margin: 0 auto;
    position: relative;
}
.speakers_list .speaker_div img {
    height: 100%;
    width: 100%;
}
.speakers_list .speaker_div .speaker_name {
    color: #999999;
    font-size: 10.61px;
}
.speakers_list .selected_div {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    background: #27c24c;
    border-radius: 50%;
    border: thin white solid;
    text-align: center;
}

现场演示 - https://jsfiddle.net/grinmax_/qn3jyhbb/