javascript - 如何对齐DIV的内联？

标签 javascript html css

下面的代码可以使用我的多维数组来创建 DOM 元素 现在的问题是我正在尝试将 Age Square 移动到我的 name 和 gender< 旁边 就像下面的图片，但我不太确定如何使用 CSS 来操纵它。

我知道如何创建 DOM 元素来显示年龄，但我不知道如何像下图那样显示它。任何建议将不胜感激。

enter image description here 

var personArr = [];
var person = {["first-Name"]: "John", ["last-Name"]: "Doe", ["age"]: 21, ["hobbies"]:["football","swimming","dancing"], ["gender"]:"Male",
  ["person-desc"]: "<br />Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky <br />boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["hobbies"]:["camping","sleeping","eating"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person3 = {
  ["first-Name"]: "Sean",
  ["last-Name"]: "Kim",
  ["age"]: 32,
  ["hobbies"]:["running","jogging","climbing"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person4 = {
  ["first-Name"]: "Ken",
  ["last-Name"]: "Chow",
  ["age"]: 12,
  ["hobbies"]:["gyming","movies","tv"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};

personArr.push(person, person2, person3, person4);
console.log(personArr);

var parent = document.getElementsByClassName('line1')[0];
        var frag = document.createDocumentFragment();

        personArr.forEach((person, i) => {
            var name = document.createElement('h4');
            var gender = document.createElement('h4');
            var desc = document.createElement('p');
            var hobb = document.createElement('div');
            var age = document.createElement('age');
            var show = document.createElement('div');

            var hobbies = '';
                $.each(person['hobbies'], function (index) {
                  hobbies += ('<div>' + person['hobbies'][index] + '</div>');
                });
            hobb.className = "hide";
            age.className ="square";
            hobb.innerHTML = hobbies;
            age.innerHTML = `${person['age']} Age`;
            name.textContent = `Name : ${person['first-Name']} ${person['last-Name']}`;
            desc.textContent = `${person['person-desc']}`;
            show.innerHTML =`<a href="#">Show more</a>`;
            gender.innerHTML =  `Gender: ${person['gender']}`;
            frag.appendChild(name);
            frag.appendChild(gender);
            frag.appendChild(age);
            frag.appendChild(desc);
            frag.appendChild(hobb);
            frag.appendChild(show);

        });
        parent.appendChild(frag);

//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();

$(document).ready(function() {
	$('.hide').hide();

   $("a").click(function() {
      $('.hide').toggle();

   });

});
body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.line1{
display:inline-block;
}
.size{
width:50%;
}
a.morelink {
	text-decoration:none;
	outline: none;
}
.morecontent span {
	display: none;

}
h4{
  margin:0;
}
.square{
    width: 50px;
    height: 45px;
    font-size: 18px;
    color: #81C784;
    text-align: center;
    background: transparent;
    display: inline-block;
    border: 1px solid #81C784;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
<div class ="size">
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
</div>

<div id="People" class="tabcontent">
<div class="line1"> 

 </div>
 </div>
</div>


</body>
</html>

最佳答案

希望这对您有所帮助。

我只是在单独的 div 中添加了用户详细信息。它包含 2 个 div，第一个包含 name 和 gender，第二个包含 age 标签。视觉上，

<div> //userdetails
    <div></div> //basic details - name and gender
    <div></div> //age details
</div>

让外层的内容对齐inline-block，通过CSS实现第一个左对齐，第二个右对齐。

var personArr = [];
var person = {["first-Name"]: "John", ["last-Name"]: "Doe", ["age"]: 21, ["hobbies"]:["football","swimming","dancing"], ["gender"]:"Male",
  ["person-desc"]: "<br />Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky <br />boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["hobbies"]:["camping","sleeping","eating"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person3 = {
  ["first-Name"]: "Sean",
  ["last-Name"]: "Kim",
  ["age"]: 32,
  ["hobbies"]:["running","jogging","climbing"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person4 = {
  ["first-Name"]: "Ken",
  ["last-Name"]: "Chow",
  ["age"]: 12,
  ["hobbies"]:["gyming","movies","tv"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};

personArr.push(person, person2, person3, person4);
console.log(personArr);

var parent = document.getElementsByClassName('line1')[0];
        var frag = document.createDocumentFragment();

        personArr.forEach((person, i) => {
            var name = document.createElement('h4');
            var gender = document.createElement('h4');
            var desc = document.createElement('p');
            var hobb = document.createElement('div');
            var age = document.createElement('age');
            var show = document.createElement('div');

            var hobbies = '';
                $.each(person['hobbies'], function (index) {
                  hobbies += ('<div>' + person['hobbies'][index] + '</div>');
                });
            hobb.className = "hide";
            age.className ="square";
            hobb.innerHTML = hobbies;
            age.innerHTML = `${person['age']} Age`;
            name.textContent = `Name : ${person['first-Name']} ${person['last-Name']}`;
            desc.textContent = `${person['person-desc']}`;
            show.innerHTML =`<a href="#">Show more</a>`;
            gender.innerHTML =  `Gender: ${person['gender']}`;
            
            var basicdetails = document.createElement("div");
            basicdetails.appendChild(name);
            basicdetails.appendChild(gender);
            var agedetail = document.createElement("div");
            agedetail.appendChild(age);
            var userdetails = document.createElement("div");
            userdetails.appendChild(basicdetails);
            userdetails.appendChild(agedetail);
            
            basicdetails.className += "basicDetails";
            agedetail.className = "ageDetail";
            userdetails.className = "userDetails";
            
            frag.appendChild(userdetails);
            frag.appendChild(desc);
            frag.appendChild(hobb);
            frag.appendChild(show);

        });
        parent.appendChild(frag);

//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();

$(document).ready(function() {
	$('.hide').hide();

   $("a").click(function() {
      $('.hide').toggle();

   });

});
body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.line1{
display:inline-block;
}
.size{
width:50%;
}
a.morelink {
	text-decoration:none;
	outline: none;
}
.morecontent span {
	display: none;

}
h4{
  margin:0;
}
.square{
    width: 50px;
    height: 45px;
    font-size: 18px;
    color: #81C784;
    text-align: center;
    background: transparent;
    display: inline-block;
    border: 1px solid #81C784;
}

.userDetails
{
    width:100%;
    display:inline-block;
}

.basicDetails
{
    float:left;
}

.ageDetail
{
    float:right;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
<div class ="size">
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
</div>

<div id="People" class="tabcontent">
<div class="line1"> 

 </div>
 </div>
</div>


</body>
</html>

关于javascript - 如何对齐DIV的内联？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51129967/

上一篇：javascript - html打印时如何避免剪切元素(避免分两页显示)

下一篇：html - 边框没有在 CSS 中的图片周围绘制

相关文章：

javascript - 从以不同方式编写的 URL 获取 id 的最佳方法是什么？

html - 当背景 <div> 滚动时，保持 Google map <div> 固定

html - Bootstrap 3 复选框右侧的文本/按钮在自己的行

javascript - 无法修复弹出元素的宽度(colorbox jquery 覆盖)

javascript - ES6 在多个地方导入一个文件，为什么文件只加载一次？

javascript - 是否有 AES 的任何客户端 Javascript/JQuery 实现？

javascript - 我想通过管理面板的下拉菜单启用或禁用 "blog post"

html - 左右浮动使2列高度相同

javascript - 在不同的 div 中加载左侧导航的链接内容

javascript - 如果 glyphicon 包中未包含 Bootstrap 3 字形图标，我该如何将它的颜色更改为白色？

©2024 IT工具网  联系我们