如何对齐DIV的内联？

Question

下面有这段代码，可以使用多维数组创建DOM元素。问题是，我现在正试图将Age Square移到name and gender旁边，如下图所示，但我我真的不确定如何使用CSS来操纵它。

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

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> 

Answer 1

希望这会有所帮助。

我只是在单独的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>