div内的复选框对齐方式

Question

我想将复选框放在div标签内。我想创建像

但我得到的结果就像

复选框位置应该在右边。

Answer 1

尝试以下方法：

.myDiv{
    position: relative;
}

.myCheckbox {
    position: absolute:
    top: 50px; /* you compute this properly */
    right: 15px; /* you compute this properly */
}

Answer 2

使用awesome bootstrap复选框 http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/

Answer 3

创建一个包含div，然后添加三个浮动div，每个元素一个;媒体元素，文本元素，然后复选框。清除包含div中的浮动。将复选框放在最左边的div中。根据需要调整CSS。

这是一个工作小提琴Check out the fiddle

#media_cont {
  height:200px;
  box-shadow:0px 0px 5px #000;
  border-radius:10px;
  padding:5px;
}
.media_content {
  float:left; 
  width:33%;
  text-align:center;
}

#checkbox {
  margin-top:15%;
 }
.clear {
  clear:both;
}
.container {
  padding-top:10px;
}
<div id="media_cont">
    <div class="media_content"><img src="#" width="200" height="200"></div>
    <div class="media_content">
        <div>
            <h2 class="header">
                John Doe
            </h2>
            <h4 class="header">
                User Profile 1
            </h4>
        </div>
    </div>   
    <div id="checkbox" class="media_content"><input type="checkbox" checked></div> 
    <div class="clear"></div>
    <div class="container">
        <p>
            New section
        </p>
    </div>

    </div>

更新：如果您希望点击复选框，只需添加一些JQuery，如下所示：

 $(document).ready(function() {
    $("#profile").click(function() {
       $('input[type="checkbox"]').attr("checked", "checked");
    });
});

然后将调用ID profile添加到包含的div类中。

<div id="profile" class="profile">

这是一个更新的小提琴： Click inside div and append checked into input field