Как заставить div заполнить оставшееся горизонтальное пространство?
Скажите, у вас есть изображение на вашем пользовательском элементе управления, и вы хотите выделить его, имитируя событие «GetFocus» (например, сфокусируйтесь на своем пользовательском элементе управления, используя это изображение). Фокус на вашем пользовательском элементе управления будет обрабатываться путем рисования контурной пунктирной линии в PictureBox. Это делается через пользовательские элементы управления OnEnter и OnLeave. Вот процедура выделения ...
Public Sub highlightImage()
Dim l As Single() = {2, 2, 2, 2}
Dim p As New Pen(Color.Gray, 1)
p.DashPattern = l
Dim g As Graphics = picColor.CreateGraphics()
g.DrawRectangle(p, 0, 0, picColor.Width - 1, picColor.Height - 1)
End Sub
Эти два переопределения выполнит задание.
Protected Overrides Sub OnEnter(e As EventArgs)
MyBase.OnEnter(e)
Me.highlightImage()
End Sub
Protected Overrides Sub OnLeave(e As EventArgs)
MyBase.OnLeave(e)
MyBase.Refresh()
End Sub
3 ответа
Это похоже на то, что вы собираетесь делать.
#left {float: left; ширина: 180 пикселей; цвет фона: # ff0000; } #right {width: 100%; цвет фона: # 00FF00; } слева справа Простое решение состоит в том, чтобы просто заставить левую ширину отделения равняться 100% - ширина правильного отделения плюс любое поле между ними.
<div class="cont">
<div class="search">
Big Logo Text
</div>
<div class="navigation">
<ul class="navbar">
<li><a href="#1">NavLink1</a></li>
<li><a href="#2">NavLink2</a></li>
<li><a href="#3">NavLink3</a></li>
<li><a href="#4">NavLink4</a></li>
<li><a href="#5">NavLink5</a></li>
</ul>
</div>
</div>
.cont{
display: inline-grid;
grid-template-columns: 160px 10px calc(100% - 170px);
grid-template-rows: auto;
grid-template-areas: "search . navigation";
width: 100%;
height: auto;
text-align: center;
}
.search {
grid-area: search;
height: 90px;
background-color: #00FF00;
line-height: 80px;
font-size: 1.4rem;
font-weight: 600;
}
.navigation {
grid-area: navigation;
height: 90px;
background-color: #A53030;
}
.navbar{
display: flex;
height: 30px;
width: 100%;
padding: 0%;
list-style-type: none;
flex-flow: row wrap;
flex: 0 1 auto;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}
.navbar a{
outline: 0;
text-decoration: none;
}
Самое легкое решение состоит в том, чтобы использовать поле. Это также будет быстро реагирующим!
<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>