Выравнивание той-же-строки CSS
Сопоставленные типы нельзя использовать в интерфейсах или классах. Они могут использоваться только в псевдониме типа.
Интерфейс и наследование классов плохо сочетаются с отображаемыми типами, если в них задействованы обобщения. Typescript хочет знать форму базового класса / интерфейса заранее, поэтому пока мы можем написать что-то вроде:
interface Foo extends Pick<UserType, keyof UserType> {
}
Мы не можем написать
interface Foo<T> extends Pick<T, keyof T> { //An interface can only extend an object type or intersection of object types with statically known members
}
. Это исключает любую возможность обмануть компилятор слиянием интерфейса класса.
Единственный обходной путь - определить класс отдельно и использовать собственную подпись конструктора. Сигнатура пользовательского конструктора может иметь параметр общего типа и может использовать его в возвращаемом типе экземпляра. Мы можем сделать возвращаемый тип экземпляром класса Domain на пересечении с T:
type UserType = {
id: number,
name: string,
}
class _Domain<T> {
_data: T;
constructor(data: T) {
this._data = data;
Object.keys(data).forEach((key) => Object.defineProperty(this, key, { get: () => this._data[key] }));
}
}
const Domain = _Domain as ({
new <T>(data: T): _Domain<T> & T
})
const joeData: UserType = {
id: 1,
name: 'Joe',
}
const joe = new Domain(joeData); // type: _Domain<UserType> & UserType
console.log(joe.id);
7 ответов
это работает на меня:
<html>
<head>
<style>
div.fl {
float: left;
width: 33%;
}
div.fr {
float: right;
width: 33%;
}
</style>
</head>
<body>
<div class="fl">
A
</div>
<div class="fl">
B
</div>
<div class="fr">
C
</div>
</body>
</html>
Вы имеете в виду то же?
Можно получить странные результаты, если существует какое-либо поле в элементе, к которому Вы добавляете его. Это то, где width: 33% может не работать, потому что необходимо будет включить в сумму поля, которое имеет элемент.
<html>
<head>
<title></title>
<style type="text/css">
div { float: left; width: 33%; margin: 4px; }
</style>
</head>
<body>
<div style="border: 1px solid #ff0000;">1</div>
<div style="border: 1px solid #00ff00;">2</div>
<div style="border: 1px solid #0000ff;">3</div>
</body>
</html>
Это вызовет, это не работает как ожидалось из-за поля, добавленного к каждому отделению. Точно так же, если Вы добавите слишком много границы каждому отделению, то Вы получите подобный результат border: 5px solid !important;
Как только Вы устраняете поле из вышеупомянутого кода, оно должно работать как ожидалось.
Я создал страницу со всеми тремя методами для сравнения по http://www.salestime.com/Ref/LeftCenterRight.html.
Попробуйте это:
<div style="float: left; width: 100px;">
left
</div>
<div style="float: right; width: 100px;">
right
</div>
<div style="width: 100px; margin: 0 auto;">
center
</div>
Необходимо принять во внимание, что левые и правые отделения не продвигают контейнерное поле (отделение вокруг кода выше) высота вниз, даже если у них есть больше содержания, чем центральное отделение, единственное, не пущенное в ход. clearfix будет заботиться об этом.
Пустите в ход первые оставленные два и пустите в ход третье право при обеспечении, что ширины будут соответствовать строке, в которую Вы размещаете их.
Используйте пиксельные ширины, если Ваш дизайн допускает его.
Пустите в ход 'покинутый' LeftBlock, CenterBlock 'ни один' и RightBlock 'право'. Но удостоверьтесь, что Центральный элемент появляется в последний раз на Вашей странице HTML, иначе это работа привычки.
Вот еще один varition темы:-
<html>
<head>
<style type="text/css">
div div {border:1px solid black}
div.Center {width:34%; float:left; text-align:center}
div.Left {float:left; width:33%; text-align:left}
div.Right {float:right; width:33%; text-align:right}
</style>
</head>
<body>
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div>
</body>
</html>
Обратите внимание, что граница возможна при помощи внутреннего отделения для каждого из отделений 'панели'. Также дает центру оставаться 1% пикселей.