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

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

Answer 3

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

这是一个有效的 fiddle 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>

UPDATE：如果您希望选中复选框，只需添加一些 JQuery，例如以下内容：

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

然后将呼叫 ID profile 添加到包含 div 的 class。

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

这是更新后的 fiddle： Click inside div and append checked into input field

div 内的复选框对齐

Checkbox alignment inside div

html

css

zurb-foundation