Question

我正在使用示例中的div表。

有ng-repeat angularjs在一个大包装div中生成较小的div。所有这些都集中在一起。我想要的是在wrapper_main div的右侧放置一个较小的div，其中wrapper_main div仍位于中心。我尝试添加display:inline-block但没有发生任何事情。 float:left将所有内容移到了左边，这不是我想要的。

＆＃13;

/* 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;

}

＆＃13;

<!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>

＆＃13;

Answer 1

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

＆＃13;

/* 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;

}

＆＃13;

<!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>

＆＃13;

将div放在彼此旁边

1 个答案: