将图像和Div元素放在一起？

时间：2017-04-11 15:46:45

标签： html css image

在我的网站页面上工作，我试图并排设置一系列配置文件。 The idea is that the images of the profiles will be external links, but I would like each small block profile to be side by side. 我还不太清楚如何做到这一点，我认为修复填充并为块本身添加内联会将它们并排堆叠。帮助

＆＃13;
＆＃13; 
.Head, .Welcome {
    padding-left: 300px;
	margin-right: 150px;
}

.body {
    padding-left: 300px;
	margin-right: 150px;
}

.img.center {
	display: block;
	margin: 0 auto;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 200px;
	background-color: #d9d9d9;
	height: 100%;
	position: fixed;
	display: inline-block;
}

li {
	text-align: center;
	border-bottom: 1px solid #555;
}

#pagename {
	text-align: center;
	font-family: "Arial"
}

li a {
	display: block;
	color: #000;
	padding: 8px 16px;
	text-decoration: none;
	font-family: "Arial"
}

.active {
	background-color: #990000;
	color: white;
}

li a:hover {
	background-color: #990000
	color: white;
}

#titletext {
	text-align: center;
	font-family: "Arial";
	font-size: 50;
}

/*GAR PROFILE*/

.Gar{
	padding-left: 300px;
}

.gar-block1{
	background-color: #990000;
	color: white;
	font-family: "Arial";
	text-decoration: none;
	text-align: center;
	width: 250px;
	padding: 20px;
}

.gar-block2{
	background-color: #d9d9d9;
	color: black;
	font-family:"Arial";
	text-decoration: none;
	width: 250px;
	height: 300px;
	padding: 20px;
}

/*MAYU PROFILE*/

.Mayu{
	padding-left: 750px;
	display: in-line;
}

.mayu-block1{
	background-color: #990000;
	color: white;
	font-family: "Arial";
	text-decoration: none;
	text-align: center;
	width: 250px;
	padding: 20px;
	display: in-line;
}

.mayu-block2{
	background-color: #d9d9d9;
	color: black;
	font-family:"Arial";
	text-decoration: none;
	width: 250px;
	height: 300px;
	padding: 20px;
	display: in-line;
}
＆＃13; 
<!doctype html>
	<html>
<!--HEAD INFORMATION-->
	<head>
		<link rel="stylesheet" type="text/css" href="CHARACTER_PAGE.css">
		<title>FFXIV RP Database</title>
		<style>
			div.head {
				background-color: #000000;
				color: white;
				text-decoration: none;
				margin: 5px 0 5px 0;
				padding: 20px;
			}
		</style>
	</head>
<!--END: HEAD INFORMATION-->
	
	<body>
<!--NAVIGATION BAR-->
		<div class="Navigation">
			<ul>
				<li id="first"><img src="xiv logo.png" width="200px"></li>
				<li><a href="home.html">Home</a></li>
				<li><a href="characters.html" class="active">Characters</a></li>
				<li><a href="story.html">Story</a></li>
				<li><a href="stats.html">Stats</a></li>
				<li><a href=".html">Contact</a><li>
			</ul>
		</div>
<!--END: NAVIGATION BAR-->

<!--HEADER-->
		<div class="head">
			<h1 id="titletext">FFXIV RP Database</h1>
		</div>
<!--END: HEADER--> 

<!--BELOW HEAD CONTENT-->
		<div class="Characters">
			<p>
				<h2 id="pagename">Characters</h2>
				<p>
		</div>
	
<!--CHARACTER PROFILE: GAR-->
	<div class="Gar">
		<p>
			<a href="https://charahub.com/character/1024524/Gar"><img id="garprofile" src="Gar.png" height="290px"></a>
				<div class="gar-block1"><h3>"Gar"</h3></div>
				<div class="gar-block2">
					<p><b>Age:</b> 30</p>
					<p><b>Height:</b> 5'11"</p> 
					<p><b>Job:</b> Dark Knight</p>
					<p><b>Role:</b> Tank</p> 
					<p><b>Family:</b> Unknown mother and father (estranged)</p> 
					<p><b>Significant Other:</b> Mayumi Mori</p> 
	</p>
<!--CHARACTER PROFILE: MAYU-->
	<div class="Mayu">
		<p>
		<aside>
			<a href="https://charahub.com/character/1024524/Gar"><img id="garprofile" src="Mayumi.png" height="290px"></a>
				<div class="mayu-block1"><h3>Mayumi Mori</h3></div>
				<div class="mayu-block2">
					<p><b>Age:</b> 23</p>
					<p><b>Height:</b> 4'8"</p> 
					<p><b>Job:</b> Astrologian</p>
					<p><b>Role:</b> Healer</p> 
					<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p> 
					<p><b>Significant Other:</b> Gar</p> 
		</aside>
		</p>
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

使用float：left;在你的CSS样式表中。

#a{
float:left;
}
#b{
float:left;
}

这两个div有一个id：a，b将并排，但你需要使用clear：both;在下一个div;记住关闭标签。我希望它有所帮助

答案 1 :(得分：0)

我不确定我能否理解你，但你的意思是你希望个人资料集中在一起吗？

如果是这种情况，我已经为你做了。

还请检查您的HTML代码，有很多遗失</>关闭代码

我还会编辑您的一些代码，请检查HTML和CSS下面的代码。

由于.Gar和.Mayu是相同的布局，我在一个类profile中显示了它的css布局，同时显示容器inline-block

希望它有所帮助。

    div.head {
        background-color: #000000;
        color: white;
        text-decoration: none;
        margin: 5px 0 5px 0;
        padding: 20px;
    }

    .Head, .Welcome {
        padding-left: 300px;
        margin-right: 150px;
    }

    .body {
        padding-left: 300px;
        margin-right: 150px;
    }

    .img .center {
        display: block;
        margin: 0 auto;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: #d9d9d9;
        height: 100%;
        position: fixed;
        display: inline-block;
    }

    li {
        text-align: center;
        border-bottom: 1px solid #555;
    }

    #pagename {
        text-align: center;
        font-family: "Arial"
    }

    li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
        font-family: "Arial"
    }

    .active {
        background-color: #990000;
        color: white;
    }

    li a:hover {
        background-color: #990000 color: white;
    }

    #titletext {
        text-align: center;
        font-family: "Arial";
        font-size: 50;
    }

    /*GAR PROFILE*/
    .profile {
        margin-left: 300px;
        display: inline-block;
        margin-bottom: 100px;
    }

    .block1 {
        background-color: #990000;
        color: white;
        font-family: "Arial";
        text-decoration: none;
        text-align: center;
        width: 250px;
        padding: 20px;
    }

    .block2 {
        background-color: #d9d9d9;
        color: black;
        font-family: "Arial";
        text-decoration: none;
        width: 250px;
        height: 300px;
        padding: 20px;
    }
<!--NAVIGATION BAR-->
<div class="Navigation">
    <ul>
        <li id="first"><img src="xiv logo.png" width="200px"></li>
        <li><a href="home.html">Home</a></li>
        <li><a href="characters.html" class="active">Characters</a></li>
        <li><a href="story.html">Story</a></li>
        <li><a href="stats.html">Stats</a></li>
        <li><a href=".html">Contact</a></li>
    </ul>
</div>
<!--END: NAVIGATION BAR-->

<!--HEADER-->
<div class="head">
    <h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->

<!--BELOW HEAD CONTENT-->
<div class="Characters">
    <p>
        <h2 id="pagename">Characters</h2>
    </p>
</div>

<!--CHARACTER PROFILE: GAR-->
<div class="profile Gar">
    <p>
        <a href="https://charahub.com/character/1024524/Gar"><img id="garprofile" src="Gar.png" height="290px"></a>
        <div class="block1">
            <h3>"Gar"</h3>
        </div>
        <div class="block2">
            <p><b>Age:</b> 30</p>
            <p><b>Height:</b> 5'11"</p>
            <p><b>Job:</b> Dark Knight</p>
            <p><b>Role:</b> Tank</p>
            <p><b>Family:</b> Unknown mother and father (estranged)</p>
            <p><b>Significant Other:</b> Mayumi Mori</p>
        </div>
    </p>
</div>

<!--CHARACTER PROFILE: MAYU-->
<div class="profile Mayu">
    <p>
        <aside>
            <a href="https://charahub.com/character/1024524/Gar"><img id="garprofile" src="Mayumi.png" height="290px"></a>
            <div class="block1">
                <h3>Mayumi Mori</h3>
            </div>
            <div class="block2">
                <p><b>Age:</b> 23</p>
                <p><b>Height:</b> 4'8"</p>
                <p><b>Job:</b> Astrologian</p>
                <p><b>Role:</b> Healer</p>
                <p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
                <p><b>Significant Other:</b> Gar</p>
            </div>
        </aside>
    </p>
</div>

相关问题
最新问题