问将div放置在彼此旁边
EN

Stack Overflow用户

提问于 2017-08-17 09:41:10

回答 1查看 103关注 0票数 1

我的div表和示例中的一样。

有ng-repeat angularjs，它在一个大包装器div中生成较小的div。所有这些都是中心。我想要的是在这个wrapper_main div的右边放置一个较小的div，wrapper_main div仍然在中间。我试着添加display:inline-block，但什么也没发生。float:left把所有东西都移到左边，这不是我想要的。

/* Styles go here */

div.pomocni_profil {
	margin: auto;
	width: 50%;
	border: solid chocolate medium;
	border-radius: 5%;
	display: inline-block;
}

div.pomocni_profil p{
	color: black;
	font-size: 14;
}

div.pratimPratioci {
	width: 200px;
	height: 500px;
	border: solid chocolate medium;
	display: inline-block;
	vertical-align: top;
}

div.wrapper_profil_glavni {
	height: 100%;
	width: 50%;
	margin: auto;
	display: inline-block;
	border: solid chocolate medium;

}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<center>
<div class="wrapper_profil_glavni" >
<div class="aktivnosti_glavni" ng-repeat="aktivnost in aktivnosti">
		<div class="pomocni_profil">
		<center>
			<p class="naslov">{{aktivnost.aktivnost.naslov}} </p>
			<p><img alt="{{aktivnost.korisnik.username}}" ng-src="/trcanje/services/rest/profilna/{{aktivnost.korisnik.username}}?imeSlike={{aktivnost.korisnik.slika}}" height="50px"> </img> </p><!-- aktivnost.slika je slika korisnika koji je obavio aktivnost -->
			<p><a href="#" ng-click = "otvoriProfil(aktivnost.korisnik.username)" >{{aktivnost.korisnik.username}} </a></p>
			<br />
			<!-- TODO: da pise ime i prezime -->
			<p class="datum">{{aktivnost.aktivnost.datumFormatiran}} </p>
			<p>
			{{aktivnost.aktivnost.tempo}}/km  {{aktivnost.aktivnost.distanca}} km</p>
			<p>Vreme: {{aktivnost.aktivnost.trajanje}}</p>
			<br />
			<table><tr><th><input type="image" src="${pageContext.request.contextPath}/slike/lajk.png" height="25px" ng-click="lajkuj(ulogovaniKorisnik.username, aktivnost.aktivnost.id);"/></th><th>{{aktivnost.brojLajkova}}</th></tr></table>
		</center>
		</div>
		<br/><br/>
	</div>
		<div ng-if="(aktivnosti.length < ukupanBrojAktivnosti) && aktivnosti.length > 0"><center><a href="#!" ng-click="ucitajJos('${userDetails.username }')">Ucitaj jos</a></center></div>
	<br/>
</div>
</center>
  </body>

<div class = "pratimPratioci">

</div>

</html>

html

css

angularjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-17 10:34:00

您可以使pratimPratioci div position absolute并将其移至右上角。或
将pratimPratioci div放在html中的center div之前，并将其样式设置为float:left

/* Styles go here */

div.pomocni_profil {
	margin: auto;
	width: 50%;
	border: solid chocolate medium;
	border-radius: 5%;
	display: inline-block;
}

div.pomocni_profil p{
	color: black;
	font-size: 14;
}

div.pratimPratioci {
	width: 200px;
	height: 500px;
	border: solid chocolate medium;
	display: inline-block;
	vertical-align: top;
      position: absolute;
    top: 0;
    right: 0;
}

div.wrapper_profil_glavni {
	height: 100%;
	width: 50%;
	margin: auto;
	display: inline-block;
	border: solid chocolate medium;

}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<center>
<div class="wrapper_profil_glavni" >
<div class="aktivnosti_glavni" ng-repeat="aktivnost in aktivnosti">
		<div class="pomocni_profil">
		<center>
			<p class="naslov">{{aktivnost.aktivnost.naslov}} </p>
			<p><img alt="{{aktivnost.korisnik.username}}" ng-src="/trcanje/services/rest/profilna/{{aktivnost.korisnik.username}}?imeSlike={{aktivnost.korisnik.slika}}" height="50px"> </img> </p><!-- aktivnost.slika je slika korisnika koji je obavio aktivnost -->
			<p><a href="#" ng-click = "otvoriProfil(aktivnost.korisnik.username)" >{{aktivnost.korisnik.username}} </a></p>
			<br />
			<!-- TODO: da pise ime i prezime -->
			<p class="datum">{{aktivnost.aktivnost.datumFormatiran}} </p>
			<p>
			{{aktivnost.aktivnost.tempo}}/km  {{aktivnost.aktivnost.distanca}} km</p>
			<p>Vreme: {{aktivnost.aktivnost.trajanje}}</p>
			<br />
			<table><tr><th><input type="image" src="${pageContext.request.contextPath}/slike/lajk.png" height="25px" ng-click="lajkuj(ulogovaniKorisnik.username, aktivnost.aktivnost.id);"/></th><th>{{aktivnost.brojLajkova}}</th></tr></table>
		</center>
		</div>
		<br/><br/>
	</div>
		<div ng-if="(aktivnosti.length < ukupanBrojAktivnosti) && aktivnosti.length > 0"><center><a href="#!" ng-click="ucitajJos('${userDetails.username }')">Ucitaj jos</a></center></div>
	<br/>
</div>
</center>
  </body>

<div class = "pratimPratioci">

</div>

</html>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45731639

复制

相似问题

问将div放置在彼此旁边
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将div放置在彼此旁边EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将div放置在彼此旁边
EN