<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
如何设置带有背景图像和 60% 响应的 div？ 我在站点顶部有导航栏 (div)，左边距和右边距为 20%，这里响应式有效。 在这之下，是另一个 div，也有 margin-left 和 margin-right 20%，有背景图像，这里响应式不起作用。
第二个问题:如果我有 3 个 div 与图像在同一行(1 个 img 在 1 个 div 中)，如果它们不能位于 1 行中，因为用户的分辨率，如何将它们“分解”为 2 或 3 行？
如果需要，演示:http://tlumacz-litewskiego.eu/
最佳答案
看来您刚刚开始学习，所以我想花点时间给您一些指导。首先，您应该了解 Bootstrap 是一个框架，可以让您实现大部分想要做的事情。如您所见，元素现在已排列并对齐，但我使用 Bootstrap 来实现这一点，而不是额外的 css。此外，当屏幕向下折叠到移动设备时，您可以控制事情何时堆叠，就像您提到的那样。此外，您将看到通过使用 Bootstrap，实现所需结果所需的样式要少得多。
示例:http://jsbin.com/beruqorinu/edit?output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div id="header" class="col-sm-12">
<h1>Tłumacz-litewskiego</h1>
</div>
</div>
<div id="menu_container" class="row">
<div class="col-sm-12">
<nav>
<i class="fa fa-home"></i> Strona główna
</nav>
</div>
</div>
<div id="main_image" class="row">
<div class="col-sm-8 bookbox">
<h2>Tłumacz języka litewskiego</h2>
<h4>mgr Živilė Wygońska</h4>
<img class="img-responsive" src="http://tlumacz-litewskiego.eu/img/book.png">
</div>
<div class="col-sm-4 contact">
<i class="fa fa-globe"></i> Polska, Podlaskie, Suwałki<br />
<i class="fa fa-phone"></i> <b>Tel:</b> +48 515 231 589<br />
<i class="fa fa-envelope-o"></i> <b>Email:</b> zivile.wygonska@gmail.com
</div>
</div>
</div>
</header>
<section id="info">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3><i class="fa fa-book"></i> O mnie</h3>
<img src="http://tlumacz-litewskiego.eu/img/slide1.jpg" class="img-responsive">
<p>Litewski to mój ojczysty język, większość życia mieszkałam na Litwie, gdzie studiowałam filologię litewską na Uniwersytecie Wileńskim.</p>
<div class="collapse" id="cl1">
<p>Po przeprowadzce do Polski na Uniwersytecie Warszawskim w Instytucie Języka I Kultury Polskiej Dla Cudzoziemców uzyskałam świadectwo znajomości języka polskiego. Ukończyłam pedagogikę na Uniwersytecie w Białymstoku.</p>
<p>Posiadam dziesięcioletnie doświadczenie jako tłumacz języka litewskiego. Przez te 10 lat, pracując z różnymi klientami, przetłumaczyłam setki stron o przeróżnej tematyce, m.in. turystyka, sprawozdania, statuty, przetargi, strony www, artykuły, etykiety, instrukcje obsługi, katalogi, foldery reklamowe, dokumentacje sądowe i wiele wiele innych.</p>
</div>
<a role="button" data-toggle="collapse" href="#cl1" aria-expanded="false" aria-controls="collapseExample1" id="element1" onclick="changeText(1)">Więcej...</a>
</div>
<div class="col-sm-4">
<h3><i class="fa fa-newspaper-o"></i> Oferta</h3>
<img src="http://tlumacz-litewskiego.eu/img/slide2.jpg" class="img-responsive">
<p>Tłumaczenia ustne, pisemne, nauka języka litewskiego i korepetycje.</p>
<div class="collapse" id="cl2">
<p><b>Tłumaczenia pisemne:</b> Tłumaczę teksty na język litewski oraz z języka litewskiego. Przetłumaczyłam m.in. kilkanaście katalogów, opowiadania, różne dokumenty, umowy, projekty i dokumenty związanie z realizacją projektów unijnych.</p>
<p><b>Tłumaczenia ustne:</b> tłumaczenie konferencyjne, symultaniczne (możliwość wynajmu sprzętu dla tłumaczeń symultanicznych), konsekutywne, towarzyszące, szeptane.</p>
<p><b>Nauka języka litewskiego i korepetycje:</b> prowadzę kursy nauki języka litewskiego na wszystkich poziomach dla klientów indywidualnych oraz instytucji.</p>
<p>Każde zlecenie jest traktowane indywidualnie, swoją pracę wykonuję rzetelnie i solidnie. Na życzenie klienta mogę przedstawić referencje zadowolonych klientów. </p>
<p>Gwarantowane bezpieczeństwo przekazywanych dokumentów oraz informacji. Każdy dokument jest traktowany jako poufny. Wykonane tłumaczenie jest archiwizowane przez okres 12 miesięcy. </p>
<p><b>Cena</b> tłumaczenia zależy od stopnia trudności tekstu, rodzaju tłumaczenia oraz terminu realizacji. Istnieje możliwość negocjacji cen przy większych zleceniach. </p>
1 strona obliczeniowa to 1600 znaków ze spacjami 12-punktową czcionką Times New Roman.</p>
</div>
<a role="button" data-toggle="collapse" href="#cl2" aria-expanded="false" aria-controls="collapseExample2" id="element2" onclick="changeText(2)">Więcej...</a>
</div>
<div class="col-sm-4">
<h3><i class="fa fa-users"></i> Klienci</h3>
<img src="http://tlumacz-litewskiego.eu/img/slide3.jpg" class="img-responsive">
<p>Urząd Miasta Suwałki<br />
Regionalny Ośrodek Kultury i Sztuki w Suwałkach<br />
Suwalski Ośrodek Kultury...</p>
<div class="collapse" id="cl3">
<p>Wigierski Park Narodowy<br />
Muzeum Wigier (Stary Folwark)<br />
Starostwo Powiatowe w Suwałkach<br />
Urząd Miasta w Giżycku<br />
Centrum Informacji Turystycznej w Giżycku, Wydawnictwo Mazurskie S.C.<br />
Podlaska Regionalna Organizacja Turystyczna<br />
oraz inni.</p>
</div>
<a role="button" data-toggle="collapse" href="#cl3" aria-expanded="false" aria-controls="collapseExample3" id="element3" onclick="changeText(3)">Więcej...</a>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div id="copyright" class="row">
<div class="col-sm-12">
© 2015 <a href="http://tlumacz-litewskiego.eu/">tlumacz-litewskiego.eu</a>
</div>
</div>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-65084817-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript">
function changeText(idElement) {
var element = document.getElementById('element' + idElement);
if (idElement === 1 || idElement === 2 || idElement === 3) {
if (element.innerHTML === 'Więcej...') element.innerHTML = 'Mniej...';
else {
element.innerHTML = 'Więcej...';
}
}
}
</script>
</body>
</html>
CSS:
header h1 {
margin-bottom: 20px;
font-size: 40px;
}
nav {
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 20px;
font-size: 24px;
border-top: 2px solid #C7C7C7;
border-bottom: 2px solid #C7C7C7;
}
#main_image {
background: url(http://tlumacz-litewskiego.eu/img/bg.jpg) no-repeat center center;
background-size: cover;
}
.bookbox,
.contact {
padding: 20px;
}
.bookbox img {
max-width: 128px;
}
.contact {
font-size: 16px;
color: white;
}
.contact i {
margin-right: 2px;
}
#info {
text-align: center;
}
#copyright {
margin-top: 20px;
text-align: right;
}
我已经为您完成了此操作，希望它能作为一个示例，以便您可以学习如何正确布置事物。几个建议:
希望这对您有所帮助!
关于html - 背景图像响应宽度为 60%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31621179/