<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.block2
{
display: block;
clear: both;
float: right;
}
.block3
{
white-space: pre;
dispaly: block;
clear: both;
float: left;
}
.block1
{
float: right;
}
dev
{
widh: 10px;
margin: 5px;
padding: 10px;
border: 5px solid navy;
}
h1
{
text-align: center;
color: #CC0000;
text-decoration: underline;
}
h2
{
text-align: center;
color: #009933;
font-family: Times New Roman;
}
body
{
background-color: #FFCCCC;
}
</style>
<title>COTOMARKET</title>
<script type="text/javascript">
var products = ["","Apple iPhone 6 Plus 16GB", "Apple iPhone 4S 8GB", "Apple iPhone 5s 32GB",
"Doro Liberto 810", "Huawei Honor 7", "LG Neon 4G", "LG G45",
"Microsoft Lumia 535", "Microsoft Lumia 640", "Nokia 108", "Samsung Galaxy J5",
"Samsung Galaxy S5 Neo SM-G903F 16GB", "Samsung Galaxy S6 32GB", "Sony Xperia M4 Aqua"];
var prices = ["",799, 250, 600, 249, 399, 129, 349, 98, 139, 25, 195, 395, 599, 269];
var amount = ["",25,13,65,78,44,12,89,78,92,34,18,25,47,39]
var inv = [];
function makeOptions()
{
var i;
for(i = 0; i < products.length; i++)
{
document.write("<option>" + products[i] + "</option>");
}
}
function display()
{
var index;
index = document.getElementById("sel").selectedIndex;
inv[index] = amount[index]*prices[index];
if (index >= 0)
{
document.getElementById("result").innerHTML = "<div class=\"block2\">" + products[index] + "</div>" + "<div class=\"block2\">Price :" + prices[index] + " </div>" + "<div class=\"block2\">Amount :" + amount[index] + "</div>" + "<div class=\"block2\">Inventory value :" + inv[index] + "</div>";
}
else
{
document.getElementById("result").innerHTML = "";
}
}
function choise()
{
var out = "";
var min = Number(document.getElementById("min").value);
var max = Number(document.getElementById("max").value);
if (min>=max)
{
document.getElementById("output2").innerHTML = "<br>Error! Min value >= Max value";
return;
}
for(var i=1; i<=14; i++)
{
if ((prices[i]>min) && (prices[i]<max))
{
out += "<div class=\"block3\">" + products[i] + "</div>" + "<div class=\"block3\">" + "Price: " + prices[i] + "</div>";
document.getElementById("output2").innerHTML = out;
}
}
}
</script>
</head>
<body>
<h1><dev>The BEST smartphone site ever!</dev></h1>
<h2>Made by Mr.David</h2>
Minimal price: <input type="text" id="min">
Maximal price: <input type="text" id="max"> <input type="button" value="Insert" onclick="choise()">
<div class="block1">All models: <select id="sel" onchange="display()">
<script>
makeOptions();
</script>
</select></div>
<div id="result"></div><div id="output2"></div>
</body>
</html>
Не могу понять как сделать так, чтобы результат, который получается после ввода минимального значения в первое поле(Например 200), максимального во второй(Например 700) и выбрать в списке выбора справа любое устройстово, выводился в одну строку. Перепробовал и display: inline-block
и float right/left
но ничего не получается.
Нужно чтобы не было вот этого пространства